[Vuejs]-Why does every component in my page appears twice?

I am not sure but try this:

    {
        path: "/app",
        component: () => import("../App.vue"),
        name: "App"
    },
    {
        path: "/test",
        component: () => import("../Views/Test.vue"),
        name: "Test"
    },
    {
        path: "/",
        component: () => import("../Views/First.vue"),
        name: "First"
    }

Update with sample code or you can refer to live code here.

// App.vue
const First = {
template: `<div class = "container" id="app">

      <h1>Hi from First</h1>

      <hr>
      <router-link to="/foo">Foo</router-link>
      <router-link to="/bar">Bar</router-link>
  </div>
`
}

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  {
            path:'/',
            name: 'First',
            component: First,
            default: First
        },
        {
            path:'/foo',
            name: 'Foo',
            component: Foo
        },
        {
            path:'/bar',
            name: 'Bar',
            component: Bar
        }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

// main.js
<div id="app">
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>