Router link not working

Hey guys I'm trying to display just example components on my website , I set up vue router and I created routes on app.js

in the blade routes don't work ( console show no errors)

this is app.js

window.Vue = require('vue');

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from './components/Dashboard.vue'
import Profile from './components/Profile.vue'

Vue.use(VueRouter)



let routes = [
    { path: '/dashboard', component: Dashboard },
    { path: '/profile', component: Profile }
]



const router = new VueRouter({
    routes // short for `routes: routes`
});




Vue.component('Dashboard', require('./components/Dashboard.vue'));
Vue.component('Profile', require('./components/Profile.vue'));


const app = new Vue({
    router
});

I wrapped all my blade vue content with this div

<div class="wrapper" id="app">

</div>

this is the part where I implemented router-links

<nav class="mt-2">
    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

        <li class="nav-item">
            <router-link to="/dashboard" class="nav-link">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p> Dashboard </p>
            </router-link>
        </li>

        <li class="nav-item has-treeview menu-open">
            <a href="#" class="nav-link active">
                <i class="nav-icon fas fa-tachometer-alt"></i>
                <p>
                    Starter Pages
                    <i class="right fas fa-angle-left"></i>
                </p>
            </a>

        </li>

        <li class="nav-item">
            <router-link to="/profile" class="nav-link">
                <i class="nav-icon fas fa-user"></i>
                <p>
                    Profile

                </p>
            </router-link>
        </li>

        <li class="nav-item">
            <a href="#" class="nav-link">
                <i class="nav-icon fas fa-power-off"></i>
                <p>
                    Logout

                </p>
            </a>
        </li>

    </ul>
</nav>

and below I have

 <div class="content" >
      <div class="container-fluid" >
      <router-view></router-view>
      </div>
    </div>

whenever I click on the items nothing happened... how can I fix this ??