تغییر کامپوننت با استفاده از روت لاراول در ویو جی اس

سلام،دوستان من یه پروژه دارم که bladeهاش با کامپوننت ویو هست و برای تغییر صفحات باید کامپوننتا عوش بشه الان با router تونستم route رو عوض کنم اما فقط route عوض میشه و کامپوننت تا صفحه رفرش نشه نمیاد،کدمم اینه مشکلش کجاست؟
فایل route دهی

import about from './components/AboutComponent';
export const routes = [
    {path:'liantic/about-us',component:about}
    ];

اینم فایل js

import VueRouter from "vue-router";
import  Vue from 'vue';
import {routes} from './routes';
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
 
require('./bootstrap');
window.Vue = require('vue');
Vue.use(VueRouter);
const router = new VueRouter({
    mode:'history',
    routes
});
/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */
 
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[۰], files(key).default))
 
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('layout-component',require('./components/LayoutSliderComponent.vue').default);
Vue.component('show-event-component',require('./components/ShowEventComponent.vue').default);
Vue.component('gallery-component',require('./components/GalleryComponent.vue').default);
Vue.component('show-gallery-component',require('./components/ShowGallery.vue').default);
Vue.component('question-answer-component',require('./components/QuestionAnswerComponent.vue').default);
Vue.component('input-sans-component',require('./components/InputSansComponent.vue').default);
Vue.component('about-component',require('./components/AboutComponent.vue').default);
Vue.component('contact-component',require('./components/ContactComponent.vue').default);
 
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
const app = new Vue({
    router,
    el: '#app'
});

اینم کامپوننتم

 <div class="owl-item active" style="width: ۲۹۶.۰۳۳px; margin-left: ۱۰px;" v-for="(event,index) in events"><div>
                            <div class="imgoptin-owl">
                                <div class="box-ribbon" v-if="soons[index] === ۱"><div class="ribbon ribbon-top-left"><span>به زودی</span></div></div>
                                <div class="box-ribbon" v-if="soons[index] === ۰" ><div class="ribbon ribbon-top-left"><span style="background-color: #۶e۶e۶e">برگزار شده</span></div></div>
                                <router-link to="liantic/about-us"><img :src="img_back+'/'+event.path" alt="Avatar" class="image"></router-link>
                                <div class="overlay">
                                    <button class="overlay-btn"><i class="fas fa-shopping-cart"></i></button>
                                    <div class="text">
                                        <h۳>{{event.title}}</h۳>
                                        <div class="icon-text"><i class="fas fa-map-marked-alt"></i><br>{{event.seat.address}}</div>
                                        <div class="icon-text"><i class="fas fa-calendar-alt"></i><br>{{event.date}}</div>
                                    </div>
                                </div>
                            </div>