Why is it that my vue instance has been created but nothing is displayed on the page?

newcomers are just beginning to learn vue + webpack, to build their own step by step. After running the page, the compilation did not report an error, and the page did not report an error. It seems that the vue instance has been created successfully. The < div id= "app" > in index.html < / div > is missing and should be replaced, but the page is blank. I don"t understand. May I ask you:

<head>
    <link rel="stylesheet" href="http://10.0.0.2:111/styles/com.css">
</head>
<body>
    <div id="app"></div>
    <script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>

above is index.html

<template>
    <div id="app"></div>
</template>
<script>
    export default {
        name: "app"
    }
</script>
<style scoped></style>

above is App.vue

import Vue from "vue";
import router from "./router";
import store from "./store";
import App from "../../../components/App.vue";
new Vue({
    el : "-sharpapp",
    router,
    store,
    components : {App},
    template : "<App/>",
    created(){
        this.$router.push({name : "index"});
        console.log("create", this);
    },
});

<template>
    <div>{{ name }}</div>
</template>
<script>
    export default {
        data () {
            return{
                name : "hellow",
            }
        },
        created () {
            console.log("index", this);
        },
    }
</script>
<style scoped></style>

above is index.vue

import Vue from "vue";
import VueRouter from "vue-router";
import index from "../../../../components/index.vue";
Vue.use(VueRouter);
const routes = [{path : "/index" , name :"index" , component : index},];
export default new VueRouter({routes})

the previous router configuration was omitted, now make it up.

what is displayed on the actual page of the result is:

<head>
    <link rel="stylesheet" href="http://10.0.0.2:111/styles/com.css">
</head>
<body>
    <!--function(e,n,r,o){return Oe(t,e,n,r,o,!0)}-->
    <script src="http://http://10.0.0.2:111/scripts/build.js"></script>
</body>

the words "created" are output in the console, but without "index", I don"t understand. If you don"t report an error, why is the content in index.vue not generated? I think it"s the problem of template pointing and so on. But after searching for a long time, I can"t think of the reason. Please give us some advice.