chore(): sync with main for beta 5 release

packages/vue/src/components/IonRouterOutlet.ts

@@ -51,7 +51,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
      * page/1 to page/2 would not cause this callback
      * to fire since the matchedRouteRef was the same.
      */
-    watch([route, matchedRouteRef], ([currentRoute, currentMatchedRouteRef], [_, previousMatchedRouteRef]) => {
+    watch(() => [route, matchedRouteRef.value], ([currentRoute, currentMatchedRouteRef], [_, previousMatchedRouteRef]) => {
       /**
        * If the matched route ref has changed,
        * then we need to set up a new view item.

packages/vue/test-app/tests/unit/routing.spec.ts

@@ -402,4 +402,52 @@ describe('Routing', () => {
     expect(pageAgain[0].props()).toEqual({ id: '1' });
     expect(pageAgain[1].props()).toEqual({ id: '2' });
   });
+
+  it('should fire guard written in a component', async () => {
+    const beforeRouteEnterSpy = jest.fn();
+    const beforeRouteLeaveSpy = jest.fn();
+    const Page = {
+      beforeRouteEnter() {
+        beforeRouteEnterSpy();
+      },
+      beforeRouteLeave() {
+        beforeRouteLeaveSpy();
+      },
+      components: { IonPage },
+      template: `<ion-page></ion-page>`
+    }
+    const Page2 = {
+      components: { IonPage },
+      template: `<ion-page></ion-page>`
+    }
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/page', component: Page },
+        { path: '/page2', component: Page2 },
+        { path: '/', redirect: '/page' }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(1);
+
+    router.push('/page2');
+    await waitForRouter();
+
+    expect(beforeRouteLeaveSpy).toHaveBeenCalledTimes(1);
+
+    router.back();
+    await waitForRouter();
+
+    expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(2);
+  });
 });