VueRouter does not load components as expected - laravel

Question

My app seems to be loading without errors except the router does not load the components:
// routes.js
import Login from './components/Login.vue'
const routes = [
{ path: '/', component: Login }
]
export default routes
// vue-config.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
router
}).$mount('#root')
// app.js
require('./vue-config');
I'm using laravels frontend JS setup
Looks like router is loading fine but nor recognizing components:
// Login.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-horizontal" #submit.prevent="login">
<div class="form-group" :class="{ 'has-error': error }">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input v-model="email" id="email" type="email" class="form-control" name="email" required autofocus>
</div>
</div>
<div class="form-group" :class="{ 'has-error': error }">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input v-model="password" id="password" type="password" class="form-control" name="password" required>
<span v-show="error" class="help-block">
<strong>{{ error }}</strong>
</span>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="#">
Forgot Your Password?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '../api'
import swalUtils from '../swalUtils'
export default {
data() {
return {
email: '',
password: '',
error: '',
}
},
methods: {
login() {
utils.spinner();
api.login(this.email, this.password)
.then(resp => {
if(resp.data.access_token) {
localStorage.setItem('token', resp.data.access_token);
// redirect
}
})
.catch(err => { console.log(err); swalUtils.handleError(err); } ); }
},
}
</script>

Answer 1

The vue router mounts the components you define in your routes in the <router-view> tag/component. Most likely you want this in your App.vue or whatever you use as root component. You would end up with something like this:
// App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "App"
};
</script>
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
router,
components: { App },
template: '<App />'
}).$mount('#app')
Notice that two things have changed in this code. The first is that we are now defining a router-view in our main component, namely App. The second is that we use this component to mount it in main.js.