I’m trying to create an onsen app using vuejs but I’m stuck on push page navigator where only splitter is working, push page is not working. below is what I’ve tried. (I’m using vue cli)

files structure

src
    - components
        - Home.vue
        - Main.vue
        - Swipenav.vue
        - Toolbar.vue

    - App.vue
    - main.js

Swipenav.vue

<template>
    <v-ons-navigator swipeable :page-stack="pageStack" @push-page="pageStack.push($event)">
        <v-ons-page>
            <v-ons-splitter>
                <v-ons-splitter-side swipeable
                    width="150px" collapse="" side="left"
                :open.sync="openSide"
                >
                    <v-ons-page>
                        <v-ons-list>
                            <v-ons-list-item v-for="page in pages" :key="page.id" tappable modifier="chevron" @click="currentPage = page.name; openSide = false"
                            >
                                <div class="center">{{ page.title }}</div>
                            </v-ons-list-item>
                        </v-ons-list>
                    </v-ons-page>
                </v-ons-splitter-side>

                <v-ons-splitter-content>
                    <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
                </v-ons-splitter-content>

            </v-ons-splitter>
        </v-ons-page>
    </v-ons-navigator>
</template>


<script>
import main_tpl from './Main.vue'
import home_tpl from './Home.vue'
export default {
    name : "swipenav",
    data() {
        return {
            pageStack: [main_tpl],
            pages : [
                { name : 'main_tpl', title : 'Main' },
                { name : 'home_tpl', title : 'Home' },
            ],
            currentPage : 'home_tpl',
            openSide : false
        };
    },
    components : {
        home_tpl : home_tpl,
        main_tpl : main_tpl
    }
}
</script>

Main.vue

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Main</div>
    </v-ons-toolbar>
    <p style="text-align: center">
      main page
      <v-ons-button @click="push_signin">Push signin</v-ons-button>
    </p>
  </v-ons-page>
</template>

<script>
import signin_tpl from './Signin.vue';
export default {
  name : 'mainpage_comp',
  methods : {
    push_signin(){
      console.log('working');
      this.$emit('push-page',signin_tpl)
    }
  }
}
</script>

I can confirm this push_signin() method is working but seems this.$emit(‘push-page’,signin_tpl) is not working. Any help, ideas please?

I’m stuck with pushPage where the reference template contains of splitter component. Here’s the link of my snippets

Surely I can use

this.$emit('push-page', appHome_tpl);

but seems the animation is buggy. Any help, ideas please?