Как заставить ons-navigator работать с Vue.js?

Question

Я пытаюсь создать простое приложение со списком деталей, используя Vue.js , но я даже не могу заставить работать основные переходы страниц.Вот что у меня есть:

В App.vue :

<template id="app">
  <v-ons-navigator swipeable
    :page-stack="pageStack"
    @push-page="pageStack.push($event)"
  ></v-ons-navigator>
</template>

<template id="page1">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Page 1</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      This is the first page
      <v-ons-button @click="push">Push Page 2</v-ons-button>
    </p>
  </v-ons-page>
</template>

<template id="page2">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>Page 1</v-ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </v-ons-toolbar>
    <p style="text-align: center">This is the second page</p>
  </v-ons-page>
</template>


<script>

const page2 = {
  key: 'page2',
  template: '#page2'
};

const page1 = {
  key: 'page1',
  template: '#page1',
  methods: {
    push() {
      this.$emit('push-page', page2);
    }
  }
};

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

В main.js:

import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios'
import vueAxios from 'vue-axios'
import VueOnsen from 'vue-onsenui'

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

Vue.use(VueOnsen);
Vue.use(vueAxios, axios, VueOnsen);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  data() {
    return {}
  }
}).$mount('#app')

I 'получаю эту ошибку:

[Vue warn]: «Навигатор» впрыска не найден

Я пытаюсь использовать приведенный здесь пример: https://onsen.io/v2/api/vue/v-ons-navigator.html