Vue.js Onsen UI v-ons-navigator pageStack.pop() で設定画面から戻ってきたらリロードをしたい

前提・実現したいこと

こんにちわ。
v-ons-navigatorにて
設定画面から戻るタイミングでリロードをしたいです。

該当のソースコード

Vue.js
1// 呼び出し元
2    pushSettingsPage() {
3      this.pageStack.push({
4        extends: settings,
5        onsNavigatorProps: {
6          reload() {
7            this.reload();
8          }
9        }
10      });
11    }

Vue.js
1// 設定画面
2  methods: {
3    pop() {
4      this.reload（）;
5      this.pageStack.pop();
6    }
7  },
8  props: ["pageStack", "reload"],
9

試したこと

https://teratail.com/questions/156122
上記と同じことだと思うのですが、うまく行きません。

行動規範の内容に同意します

回答1件

Monaca OnsenUI V2 Vue Navigationで試した限り

App.vue

vue
1<template>
2<!--
3  <v-ons-navigator :page-stack="pageStack">
4    <component :is="page" v-for="page in pageStack" :key="page.key" :page-stack="pageStack"></component>
5  </v-ons-navigator>
6-->
7  <v-ons-navigator :page-stack="pageStack"
8    @push-page="pageStack.push($event)"
9    @replace-page="pageStack.pop(); pageStack.push($event)"
10  ></v-ons-navigator>
11</template>
12
13<script>
14  import page1 from './Page1';
15  import page2 from './Page2';
16
17  export default {
18    data() {
19      return {
20        pageStack: [page1]
21      }
22    },
23  }
24</script>

CustomToolBar.vue

vue
1<template>
2  <v-ons-toolbar>
3    <div class="left">
4      <v-ons-back-button v-on:click="pop">{{ backLabel }}</v-ons-back-button>
5    </div>
6    <div class="center"><slot></slot></div>
7  </v-ons-toolbar>
8</template>
9
10<script>
11  export default {
12    props: ['pop','backLabel']
13  }
14</script>

Page1.vue

vue
1<template>
2  <v-ons-page id="page1">
3    <custom-toolbar>Page 1</custom-toolbar>
4    <p style="text-align: center">
5      This is the first page
6      <v-ons-button @click="push">Push Page 2</v-ons-button>
7    </p>
8  </v-ons-page>
9</template>
10
11<script>
12  import customToolbar from './CustomToolbar';
13  import page2 from './Page2';
14  export default {
15    data() {
16      return({a: 10});
17    },
18     methods: {
19       pop(){
20         this.pageStack.pop();
21       },
22       push() {
23          this.$emit('push-page', {
24            extends: page2,
25            onsNavigatorProps: {
26              changeSettings: this.reload
27            }
28          });
29       },
30       reload() {
31         console.log(this.a);
32       }
33     },
34     props: ['pageStack'],
35     components: { customToolbar },
36     key: 'key_page1',
37  }
38</script>

Page2.vue

vue
1<template>
2  <v-ons-page id="page2">
3    <custom-toolbar :back-label="'Page 1'" :pop="changeSettings">Page 2</custom-toolbar>
4    <p style="text-align: center">This is the second page</p>
5  </v-ons-page>
6</template>
7
8<script>
9  import customToolbar from './CustomToolbar';
10  import app from './App';
11
12  export default {
13    methods: {
14      pop() {
15        this.pageStack.pop();
16      } 
17    },
18    props: ['changeSettings', 'pageStack'],
19    components: { customToolbar },
20    key: 'key_page2',
21  }
22</script>