[Vuejs]-Routing through different components in vue

@section('content')

{{-- <div id="mute" class="on"></div> --}}
<div style="padding: 0.9rem" id="app">

{{-- <router-view name="bookBus"></router-view> --}}
<router-view></router-view>


</div>

@stop

@section('scripts')

app.js

// Import Components
import BookComponent    from './components/BookComponent.vue';
import ConfirmComponent from './components/ConfirmComponent.vue';
import PayComponent from './components/PayComponent.vue';

const routes = [
{
  path: '/',
  component: BookComponent,
  name: 'bookBus',
  meta: {
      mdata: model,
      userId: userId 
  }
},
{
    path: '/confirm/:bookId',
    component: ConfirmComponent,
    name: 'confirmBook',
},
{
    path: 'payment/:bookRef',
    component: PayComponent,
    name: 'payNow',
},
{
  path: '*',
  redirect: '/'
}
]