Random loading errors with vue-material components

I started playing with Vue.js and VueMaterial this week. It's really fun and totally new for me as I didn't do Javascript for years (Native Android being my cup of tea).

I am currently stuck with a very strange issue that I would say related to my lack of knowledge with the framework lifecycle.

Issue

1. The first time I am loading/refreshing manually the project in Chrome, it fails loading the VueMaterial components for some reason, and I get the message below:

   Unknown custom element: md-toolbar - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I get this message with every single VueMaterial components I use in the project (md-whiteframe, md-input-container, and so on).

And the result appears as below:

2. Now, if I specifically change the URL in chrome by giving the path of another component (e.g. Home), then some components are correctly displayed (except the toolbar for some reason).

3. I go back (with Chrome), and land on the first component, except that now, everything is displayed correctly, still except the toolbar (see below).

On certain occasion (really rare and completely randomly, the Toolbar is displayed correctly.

Context

I installed vue-cli via npm and built the scaffold with the webpack template, then installed VueMaterial with npm as well.

Code

Below, some bits of the code.

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.config.productionTip = false

let colorPrimary = {
  color: 'red',
  hue: 700,
  hexa: '#D32F2F'
}

let colorAccent = {
  color: 'yellow',
  hue: 600,
  hexa: '#FDD835'
}

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Vue.use(VueMaterial)

Vue.material.registerTheme('default', {
  primary: colorPrimary,
  accent: colorAccent,
  warn: colorPrimary,
  background: 'white'
})

Vue.material.setCurrentTheme('default')

App.vue

<template>
  <div id="app">
    <toolbar></toolbar>
    <router-view></router-view>
  </div>
</template>

<script>
import Toolbar from './components/Toolbar';

export default {
  components: {
      Toolbar
  },
  name: 'app'
}
</script>

<style src="./styles/general.css"></style>

Toolbar.vue (custom component)

<template>
  <div id="toolbar">
    <md-toolbar class="md-primary">
      <h2 class="md-title" style="flex: 1">Firebucket</h2>
    </md-toolbar>
  </div>
</template>

<script>
export default {
  name: 'toolbar'
}
</script>

<style scoped src="../styles/toolbar.css"></style>

Login.vue

<template>
  <div id="login" class="bg-primary">
    <md-whiteframe md-elevation="2" id="login-form">
      <span class="md-title text-primary">{{wording.login}}</span>
      <md-input-container>
          <label>{{wording.username}}</label>
          <md-input></md-input>
      </md-input-container>
      <md-input-container>
        <label>{{wording.password}}</label>
        <md-input></md-input>
      </md-input-container>

      <router-link id="login-button" tag="md-button" to="XX" class="md-raised md-primary">{{wording.login}}</router-link>
      <br />
      <md-button class="md-primary">{{wording.createAccount}}</md-button>
    </md-whiteframe>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      wording: {
        login: 'Login',
        createAccount: 'Create an account',
        username: 'Username',
        password: 'Password'
      }
    }
  }
}
</script>

<style scoped src="../styles/login.css"></style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './pages/Login'
import Home from './pages/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      alias: '/',
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

--

Again, web development is not my thing, I've heard a lot of good thing about Vue.js so I wanted to give it a try. But sorry if I am missing something really obvious.

I really can't wrap my head around the fact that it's not working the first time but working fine when I go back...

PS: the router-link (in Login.vue) doesn't work neither, nothing happens when I tap the button, but I guess that's a different issue.

Any idea anyone? General feedback on the code posted above is more than welcome so I can improve it.

The code is available on GitHub, if that can help.

Thanks a lot!