Vue component doesn't load - laravel

Question

I want to load a vue component after I click on the "next" button. The project is laravel + vue.
The components load if I put them direct into laravel blade(you can see them below) but if I try to open component from the component it does'nt work. I don't get eny error it just stays the same component. The route in the address bar changes to the route that it should change... I mean it's really starnge.
app.js:
require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue';
import VueRouter from 'vue-router';
import { routes } from './routes';
Vue.use(VueRouter);
Vue.component('productinfo-index', require('./components/productInfo/index.vue').default);
Vue.component('audit-index', require('./components/audit/index.vue').default);
Vue.component('audit-info', require('./components/audit/auditInfo.vue').default);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router
});
Routes.js:
import ProductInfoIndex from './components/productInfo/index';
import Audit from './components/audit/index';
import AuditInfo from './components/audit/auditInfo';
export const routes = [
{
path: '/productInfo',
name: 'ProductInfoIndex',
component: ProductInfoIndex
},
{
path: '/audit',
name: 'Audit',
component: Audit
},
{
path: '/audit/info',
name: 'AuditInfo',
component: AuditInfo
}
];
Index.vue:
<template>
<div>
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Inventorizacija</h1>
</div>
<div class="row">
<div class="card mx-auto">
<div class="card-header">
<router-link
:to="{name: 'AuditInfo'}"
class="btn btn-primary mb-2"
>Next</router-link>
</div>
<!-- <div v-if="showMessage">
<div class="alert alert-success">{{ message }}</div>
</div> -->
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Pavadinimas</th>
<th scope="col">Pradėta</th>
</tr>
</thead>
</div>
</div>
</div>
</div>
</template>
AuditInfo.vue(the component that should be loaded):
<template>
<div class="row">
<div class="card mx-auto">
<div class="card-header">
<router-link
:to="{name: 'Audit'}"
class="btn btn-primary mb-2"
>Back</router-link>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Pavadinimas</th>
<th scope="col">Pradėta</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

Answer 1

You should put <router-view /> somewhere in the index.vue for rendering router component.