Problems with vue-material

I want to use vue-material when placing labels like mg-avatar etc it works in the App.vue component and then when I create a component called Home.vue and I want to place other tags like md imput or whatever else throws me an error that the template works for a route that is the one of app.vue and it does not let me place anything in other components

My main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import VueMaterial from 'vue-material'

Vue.use(VueRouter);
Vue.use(VueMaterial);
Vue.component('home',Home);

const routes = [
{
path:'/',
component: Home
},
{
 path:'/home',
component: Home
}
];
const router = new VueRouter({
 routes,
mode: 'history'
});



new Vue({
el: '#app',
router,
render: h => h(App)
});

Vue.material.registerTheme('default', {
primary: 'blue',
accent: 'red',
warn: 'red',
background: 'grey'
})

my App.vue

<template>
  <div id="app">
  <md-toolbar>
    <h1 class="md-title" style="flex: 1">MichiGuau</h1>
     <md-avatar class='md-large'>
     <img src="./assets/logo.png" alt="Avatar">
    </md-avatar>
     <md-button class="md-icon-button">
      <md-icon>more_vert</md-icon>
    </md-button>
  </md-toolbar>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
    }
  }
 }
</script>

my Home.vue // is my new component to the cork does not work the vue-material tags

<template>
 <h1 class="md-title" style="flex: 1">{{title}}</h1>
</template>
<script>
export default {
    name: 'home',
    data(){
        return{
            title: 'Bienvenido a MichiGuau'
        }
    }
  }
</script>