How to properly load Vue JS components?

Question

Vue.js

Hello.
Started doing SPA.
In general, under the Laravel 5.5 capt,
I just can’t figure out how to load the component by clicking on the route.
Now I have this structure:

I output it like this.

<div class="container">
                    <div id="root"></div>
</div>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import App from './App.vue'
import router from './router'

const app = new Vue({
    el: '#root',
    components: { App },
    template: '<app></app>',
    router
})

app.vue

<template v-for="item in items"><code lang="javascript">

</code>
  <div id="root">
      <router-link :to="{ path: '/test'}" replace>TEST</router-link>
    </div>
</template>

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path: '/test', component: require('./views/Main.vue')}
    ]
})

export default router

How can I solve this problem so that my routes are visible? Or am I calling them by mistake in App.vue?

Answer 1

I forgot to
advise the doc to read https://router.vuejs.org/en/essentials/getting-sta...
and there is something wrong with the tags in App.vue.