VueJs Material插件无法正常工作

Question

我想在我的应用中使用vue-material包。我提供了所有内容，但是我的组件没有正确呈现。我正在使用VueJs 2.x.x

这是我的main.js文件：

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

Vue.use(VueMaterial) 
Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})


new Vue({
  el: '#app-container',
  components: {
    App
  }
})

这是App.vue：

<template>
  <div id="app">
    <div>Current page: {{currentView}}</div>
    <img src="./assets/logo.png">

    <transition name="fade" mode="out-in">
      <component @stateCPchanged="changeView" v-bind:is="currentView">    </component>
    </transition>
  </div>
</template>

<script>
import numberPage from './components/NumberPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'

export default {
  data () {
    return {
      currentView: state.currentPage
    }
  },
  components: {
    numberPage: numberPage,
    redirectPage: redirectPage
  }, 
  methods: {
    changeView() {
      this.currentView = state.currentPage
    }
  }
}
</script>

<style>
    ...
</style>

使用插件的页面：

<template>
    <div v-md-theme="'default'" 
        <md-button class="md-raised">Default</md-button>
    </div>
</template>

<script>

    import state from '../state.js'
    export default {
        data(){
            return{
                message: "this.clientId"
            }
        },
        methods:{
            goOtp(){

            },
            goRedirect(){
                state.currentPage = 'redirectPage'
            }
        }

    }
</script>

<style>
    ....
</style>