Vue component doesn't load

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>