OnsenUI(Vue)の画面遷移の方法がわからない

OnsenUIの画面遷移方法に悩んでいます。

質問者のレベルは

OnsenUIは初めて
Vueは試してみた程度に触っている
Javascriptは１年以上

となります。

現在の仕様として下図の様に、初期情報入力画面として、P1とP2を設置しており、
それが済み次第、メインページであるT1-P1へと遷移します。

しかし、T1-P1からP2への遷移もしてほしいとのことで、試行錯誤しています。

T1-P1からemitを行って
Tab1 -> TabBar -> App(ここでp2をStackに代入) -> p2
という処理を行っています。
画面遷移自体はできているのですが、下記の様なエラーが
発生してしまいます。
「vendor.bundle.js:6 TypeError: Cannot read property 'children' of undefined」

ナビゲーターやTab内で遷移したいという要望もあり、複雑になってしまい、
私自身も整理がつかなくなってきてしまいました...。

そもそもこの遷移方法（コードの書き方として）が正しいものなのか...とも感じております。

画面遷移そのものがおかしいと言われても困ってしまいますので、
どうか、この遷移を実現できる術を教えて頂きたいです。

よろしくお願いいたします。

ソースコード

t1p1.vue

<template>
  <v-ons-page>
    <custom-toolbar>tab1</custom-toolbar>
    tab1
    <v-ons-button @click="back">戻る</v-ons-button>
  </v-ons-page>
</template>
<script>
import customToolbar from './CustomToolbar';
export default {
  methods: {
    back() {
      this.$emit('changePage');
    }
  },
  components: { customToolbar }
}
</script>

tab1.vue

<template>
  <v-ons-navigator :page-stack="pageStack" @changePpage="changePpage">
  </v-ons-navigator>
</template>
<script>
import t1p1 from './t1p1';
export default {
  methods: {
    changePpage() {
      this.$emit('changePpage');
    }
  },
  data() {
    return {
      pageStack: [t1p1]
    }
  },
  props: []
}
</script>

tabbar.vue

<template>
  <v-ons-page>
    <v-ons-tabbar @changePage="changePage" class="tabs" position="bottom" :visible="true" animation="none" :tabs="tabs" :index.sync="tabIndex">
    </v-ons-tabbar>
  </v-ons-page>
</template>
<script>
import tab1 from './tab1.vue';
import tab2 from './tab2.vue';
export default {
  methods: {
    changePage() {
      this.$emit('changePage');
    }
  },
  data() {
    return {
      tabIndex: 0,
      tabs: [
        {
          icon: 'ion-home',
          label: 'tab1',
          page: tab1,
        },
        {
          icon: 'md-file',
          label: 'tab2',
          page: tab2,
        }
      ]
    }
  }
}
</script>
<style>

App.vue

<template>
  <v-ons-navigator :page-stack="pageStack" @push="push($event)" @changePage="changePage">
  </v-ons-navigator>
</template>
<script>
import p1 from './Page1';
import p2 from './Page2';

export default {
  methods: {
    push(pageNumber) {
      this.pageStack.push(pages[pageNumber - 1]);
    },
    changePage(e) {
      this.currentPage = p2;
    }
  },
  data() {
    return {
      pageStack: [p1]
    }
  },
  components: { p1, p2}
}
</script>