fix(vue): lifecycle events are correctly fired in component context (#22348)

resolves #22338

packages/vue/test-app/src/router/index.ts

@@ -7,6 +7,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/',
     component: Home
   },
+  {
+    path: '/lifecycle',
+    component: () => import('@/views/Lifecycle.vue')
+  },
   {
     path: '/overlays',
     name: 'Overlays',

packages/vue/test-app/src/views/Home.vue

@@ -41,6 +41,9 @@
         <ion-item router-link="/tabs-secondary" id="tab-secondary">
           <ion-label>Tabs Secondary</ion-label>
         </ion-item>
+        <ion-item router-link="/lifecycle" id="lifecycle">
+          <ion-label>Lifecycle</ion-label>
+        </ion-item>
       </ion-list>
 
     </ion-content>

packages/vue/test-app/src/views/Lifecycle.vue

@@ -0,0 +1,77 @@
+<template>
+  <ion-page data-pageid="lifecycle">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Lifecycle</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Lifecycle</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        ionViewWillEnter: <div id="willEnter">{{ willEnter }}</div><br />
+        ionViewDidEnter: <div id="didEnter">{{ didEnter }}</div><br />
+        ionViewWillLeave: <div id="willLeave">{{ willLeave }}</div><br />
+        ionViewDidLeave: <div id="didLeave">{{ didLeave }}</div><br />
+
+        <ion-button router-link="/navigation" id="lifecycle-navigation">Go to another page</ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    IonButton,
+    IonBackButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    ionViewWillEnter() {
+      this.willEnter++;
+    },
+    ionViewDidEnter() {
+      this.didEnter++;
+    },
+    ionViewWillLeave() {
+      this.willLeave++;
+    },
+    ionViewDidLeave() {
+      this.didLeave++;
+    }
+  },
+  data() {
+    return {
+      willEnter: 0,
+      didEnter: 0,
+      willLeave: 0,
+      didLeave: 0
+    }
+  }
+});
+</script>