Laravel - Vue.js routes doesn't work properly

i'm pretty new to vue.js also i'm using laravel 8 and php 7.24 what i want to do is access pages without reloading. i've set up vue.js and i have two vue components which i need to route one to another. problem is i can see the home.vue file's ingrediants but the router-link element doesn't work.

app.js file

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const app = new Vue ({
    el: '#app',
    router: new VueRouter(routes)
});

route.js file

import home from './components/home.vue';
import example from './components/example.vue';
export default{
    mode: 'history',
    linkActiveClass: 'font-semibold',
    routes: [
        {
            path: '/vue',
            component: home
        },
        {
            path: '/vue/example',
            component: example
        }
    ]
}

home.vue file

<template>
    <router-link to="/vue/example"><a>url to example</a></router-link>
</template>
<script>
export default {
    name : "home"
}
</script>

example.vue file

<template>
    <router-link to="/vue"><a>Back to the root</a></router-link>
</template>
<script>
export default {
    name : "example"
}
</script>

here is how i defined my routes (without them page's doesn't work)

Route::get('/vue/{any}', function (){
return view('vue.index');
})->where('any', '.*'); ------> // this function doesn't work.
Route::view('/vue', 'vue.index');

here is lastly my index blade and i cant see my components here do you guys see smth wrong?

<div id="app"></div>
    <h1>This is a vue component</h1>

<router-link to="/vue/example" exact><div class="button">please send me to another page</div></router-link>
    <script src="{{asset('js/app.js')}}"></script>
    <script src="{{asset('js/routes.js')}}"></script>
    <script src="{{asset('components/example.vue')}}"></script>
    <script src="{{asset('components/home.vue')}}"></script>