bug: vue, updating class attribute causes tabs state to get changed

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x

### Current Behavior

If you use dynamic attributes on the ion-tabs and ion-tab-bar elements, such as class or style. When switching between tabs, their history is reset.

### Expected Behavior

Changing the class and other attributes of ion-tabs and ion-tab-bar does not reset the tab history.

### Steps to Reproduce

1. Clone repository (code reproduction URL)
2. npm install && npm run serve
3. Follow the steps below ↓

[tab X] - click action on a tab named X
→ - go to the child page (click on the next button)

Tab behavior, with dynamic attributes in ion-tabs or ion-tab-bar (for example, it can be class or style)
Transition option 1: [tab A] A0 → A1 → A2 [tab B] B0 → B1 → B2 [tab C] C0 → C1 → C2 [tab A] A0 **(ERROR)** [tab B] B0 **(ERROR)** [tab C ] C0 **(ERROR)**
Transition option 2: [tab A] A0 → A1 → A2 [tab B] B0 → B1 [tab A] A0 **(ERROR)**
Jump option 3: [tab A] A0 → A1 → A2 [tab B] B0 [tab A] A2 [tab B] B0 [tab C] C0 [tab A] A0 **(ERROR)**

https://user-images.githubusercontent.com/12464258/150413348-c01653d2-d516-4bf6-b7cf-03b12471457b.mp4

-----
Open file `scr/views/TabsPage.vue`, comment block:
```js
onBeforeUnmount(router.beforeEach((to, from, next) => {
className.value = 'class-name-' + Math.round(Math.random() * 10000);
next();
}));
```

**Normal tab behavior:**
Transition option 1: [tab A] A0 → A1 → A2 [tab B] B0 → B1 → B2 [tab C] C0 → C1 → C2 [tab A] A2 [tab B] B2 [tab C] C2
Transition option 2: [tab A] A0 → A1 → A2 [tab B] B0 → B1 [tab A] A2
Transition option 3: [tab A] A0 → A1 → A2 [tab B] B0 [tab A] A2 [tab B] B0 [tab C] C0 [tab A] A2

https://user-images.githubusercontent.com/12464258/150413375-6fdefeb3-c403-4777-961b-c41c08532fa0.mp4

### Code Reproduction URL

https://github.com/virusv/ionic-tabs-app-router-bug

### Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\naliv\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/vue 6.0.3

Capacitor:

Capacitor CLI : 3.4.0
@capacitor/android : not installed
@capacitor/core : 3.4.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.1.2
OS : Windows 10

### Additional Information

This is all due to the updated() event firing on the Vue ion-tab-bar component, which in turn calls setupTabState(ionRouter: any) which resets the tab history.

Start with scr/views/TabsPage.vue and reproduce the tab transitions with the dynamic class update enabled and disabled. Trace the updated event on ion-tab-bar into setupTabState and verify that changing ion-tabs or ion-tab-bar attributes no longer resets tab history. Done means the A0/A1/A2, B0/B1/B2, and C0/C1/C2 histories remain intact when switching tabs.

由索引模型根据 Issue 内容生成。