Случайные ошибки загрузки с компонентами vue-material

На этой неделе я начал экспериментировать с Vue.js и VueMaterial. Это действительно весело и совершенно ново для меня, так как я не использовал Javascript в течение многих лет (родной Android был моей чашкой чая).

В настоящее время я столкнулся с очень странной проблемой, которая, я бы сказал, связана с отсутствием у меня знаний о жизненном цикле фреймворка.

Проблема

1. В первый раз, когда я вручную загружаю/обновляю проект в Chrome, по какой-то причине не удается загрузить компоненты VueMaterial, и я получаю следующее сообщение:

   Неизвестный пользовательский элемент: md-toolbar — правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

Я получаю это сообщение с каждым отдельным компонентом VueMaterial, который я использую в проекте (md-whiteframe, md-input-container и т. д.).

И результат выглядит следующим образом:

2. Теперь, если я специально изменяю URL-адрес в chrome, указав путь к другому компоненту (например, Home), то некоторые компоненты отображаются правильно (кроме панели инструментов по какой-то причине).

3. Я возвращаюсь (с Chrome) и приземляюсь на первый компонент, за исключением того, что теперь все отображается правильно, кроме панели инструментов (см. Ниже).

В некоторых случаях (действительно редко и совершенно случайно) панель инструментов отображается правильно.

Контекст

Я установил vue-cli через npm и построил каркас с шаблоном веб-пакета, а затем также установил VueMaterial с помощью npm.

Код

Ниже некоторые фрагменты кода.

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 (пользовательский компонент)

<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>

Логин.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
    }
  ]
})

--

Опять же, веб-разработка — это не мое, я слышал много хорошего о Vue.js, поэтому мне захотелось попробовать. Но извините, если я упустил что-то действительно очевидное.

Я действительно не могу уложить в голове тот факт, что это не работает в первый раз, но работает нормально, когда я возвращаюсь...

PS: ссылка на маршрутизатор (в Login.vue) тоже не работает, ничего не происходит, когда я нажимаю кнопку, но я думаю, что это другая проблема.

Любая идея? Общие отзывы о коде, опубликованном выше, более чем приветствуются, поэтому я могу его улучшить.

Код доступен на GitHub, если это может помочь.

Большое спасибо!