Issue number: resolves #28774
What is the current behavior?
There are two issues causing Ionic Vue apps to not behave as intended with certain versions of Vue:
- In Vue 3.3 a breaking change shipped that changes the default behavior of the
watchinside of IonRouterOutlet to be a shallow watcher instead of a deep watcher. This caused the router outlet to not consistent re-render. While the change was later reverted by the Vue team, they expressed that the change may re-land in a future minor release. As a result, we will need to account for this inside of Ionic. - In Vue 3.2 a custom elements improvement shipped that changed how custom elements are referred to in VNodes.
What is the new behavior?
- The affected
watchcall now is now explicitly a deep watcher. This change is backwards compatible as well as forward compatible with upcoming Vue changes. - Updated IonTabs to account for the new VNode behavior for custom elements. Ionic still supports version of Vue that do not have this improvement, so we need to account for both behaviors for now. I also added a tech debt ticket to remove the old checks when we drop support for older versions of Vue.
- Updated E2E test dependencies. During this update some of our tests needed to be updated to account for newer versions of Vue/Vitest. Overall I was able to simplify a lot of our tests as a result.
I plan to add renovatebot to these E2E test apps, but I will handle that in a separate PR.
Does this introduce a breaking change?
- Yes
- No
Other information
Dev build: 7.6.6-dev.11705526292.1bc0acb5
Note: Both of the issues cause tests to fail when using the latest dependencies in the Vue E2E test app. However, I need to use the latest dependencies so I can demonstrate that my changes do fix the reported issues. As a result, I have both fixes in the same PR.