Renders not batched consistently since 3.3.11

[KaelWD]

Vue version

3.3.11

Link to minimal reproduction

https://play.vuetifyjs.com/#eNqFkMEKgkAQhl9lmEsFqZhBIBp06QXqlh1MVxJcd9ld9yK+e7OuQQTRbX6+b4d/9jaiVlV0kjK0A8MUM8O47ErDjkUPkNmglHIe52DKhwYbcFGzLi+QYoELfXNIbdkNjGhM7NwqbbJoJj/FHYkXVom+/mcmZF6frfoSl6R9Zwq+dBZ9HENRV6qVBjQzg7+p5VIoAyMo1sAEjRIcVvQPK6cDUCNtwBXInbGON26n30LvcdpiEiZhHKMb9uEB7y92HWkI

Steps to reproduce

Click the second tab

What is expected?

There should be an animation on the tab underline.

What is actually happening?

No animation, the first tab re-renders before the second one gets the update event.

System Info

No response

Any additional comments?

vuetifyjs/vuetify#18892

https://github.com/vuetifyjs/vuetify/blob/fa5cccbdc9869eed397940574c3f6aaf144d7b31/packages/vuetify/src/components/VTabs/VTab.tsx#L60 expects that the DOM has not been updated yet

Bisected to #7181

[yyx990803]

This is a difficult one - the fix in #7181 addresses an important issue, where watchers (pre by default) are firing for components that are unmounted in the same flush cycle.

However, this does introduce a change in the way pre-watchers interact with component updates:

• Before the change: pre-watchers, even in child components, are fired before all component updates.

• After the change: pre-watchers are fired before the owner component and its descendants' updates, but it will now be called after the parent component's update.

The post-change behavior is necessary for avoiding the "watcher firing for unmounted components" issue, because we can't know if the component is going to be unmounted until the parent has updated.

Vuetify here is relying on the before-change behavior: VBtn as a child, via the useGroupItem composable, is watching for its isSelected state, and emitting an event to the parent VTabs component, where the parent expects the DOM to not have been updated yet. A rather straightforward workaround for Vuetify is to make the watcher in useGroupItem sync instead.

So technically, the change in #7181 is a breaking change. The trade-off here is between:

1. (old behavior) Let watchers fire for components unmounted in the same tick. This is probably quite easy to run into and not obvious to the users on how to workaround it.

2. (new behavior) Watchers in a component unmounted in the same tick won't fire anymore, but they also now fire after parent updates. This only affects cases where a child pre-watcher expects to be fired before parent DOM updates. IMO this is a less common edge case as it should be in general avoided for a child component to care about parent DOM. In rare cases where this is needed, a sync watcher can be used instead.

IMO (2) is the more reasonable option here.

[yyx990803]

Updated relevant docs section to provide more details for the current behavior: vuejs/docs@80e2128

Closing since there is a simple workaround for Vuetify.