Routing through different components in vue - laravel

Question

I am currently working with laravel and vuejs for a booking application, the flow of the app is that once the user clicks to book they get redirected to a page where the booking process starts, this page is where i instantiate vue, and i also call the first component (Book Component) to be rendered:
#section('content')
{{-- <div id="mute" class="on"></div> --}}
<div style="padding: 0.9rem" id="app">
{{-- <router-view name="bookBus"></router-view> --}}
<booker :dref="{{ $route }}" :user="{{ Auth::user()->id }}"></booker>
<router-view></router-view>
</div>
#stop
#section('scripts')
my app.js file looks like this:
// Import Components
import BookComponent from './components/BookComponent.vue';
import ConfirmComponent from './components/ConfirmComponent.vue';
import PayComponent from './components/PayComponent.vue';
Vue.component('booker',BookComponent);
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',
}
]
const router = new VueRouter({
routes,
mode: 'history',
});
const app = new Vue(
{
router,
}).$mount('#app')
after this the next component to be rendered is the confirmation component that asks the user to confirm the submitted details, and after this is the final payment component. The issue is once the booking component has been processed successfully i programmatically moved to the confirm component. But the confirm component renders directly below the book component. what i want to achieve is for the confirm component to render alone and not below the book component.

Answer 1

#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: '/'
}
]