fix(vue): ionic lifecycle hooks now run when using vue 3.2 setup syntax (#24253)

resolves #23824

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>

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

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

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

@@ -47,6 +47,9 @@
         <ion-item button router-link="/lifecycle" id="lifecycle">
           <ion-label>Lifecycle</ion-label>
         </ion-item>
+        <ion-item button router-link="/lifecycle-setup" id="lifecycle-setup">
+          <ion-label>Lifecycle (Setup)</ion-label>
+        </ion-item>
         <ion-item button router-link="/delayed-redirect" id="delayed-redirect">
           <ion-label>Delayed Redirect</ion-label>
         </ion-item>

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

@@ -0,0 +1,56 @@
+<template>
+  <ion-page data-pageid="lifecycle-setup">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Lifecycle (Setup)</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Lifecycle (Setup)</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        onIonViewWillEnter: <div id="onWillEnter">{{ onWillEnter }}</div><br />
+        onIonViewDidEnter: <div id="onDidEnter">{{ onDidEnter }}</div><br />
+        onIonViewWillLeave: <div id="onWillLeave">{{ onWillLeave }}</div><br />
+        onIonViewDidLeave: <div id="onDidLeave">{{ onDidLeave }}</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" setup>
+import {
+  IonButton,
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  onIonViewWillEnter,
+  onIonViewDidEnter,
+  onIonViewWillLeave,
+  onIonViewDidLeave
+} from '@ionic/vue';
+import { ref } from 'vue';
+const onWillEnter = ref(0);
+const onDidEnter = ref(0);
+const onWillLeave = ref(0);
+const onDidLeave = ref(0);
+
+onIonViewWillEnter(() => onWillEnter.value += 1);
+onIonViewDidEnter(() => onDidEnter.value += 1);
+onIonViewWillLeave(() => onWillLeave.value += 1);
+onIonViewDidLeave(() => onDidLeave.value += 1);
+</script>