Vue version

3

Link to minimal reproduction

Links to code sandebox provided below (correct Vue2 + buggy Vue3).

Steps to reproduce

Nest a <TransitionGroup> in another <TransitionGroup>, and replace an element by another in the nested <TransitionGroup>.

<!-- simplified code -->
<TransitionGroup>
    <TransitionGroup>
        <ItemA1 v-if="itemA1" />
        <ItemA2 v-if="itemA2" />
    </TransitionGroup>
    <ItemB /> <!-- .move should be applied during itemA1 to itemA2 transition -->
</TransitionGroup>

When alternating between <ItemA1> and <ItemA2>, the .move class should be applied on <ItemB>. This was the case in Vue2, but not anymore in Vue3.

Vue2 VS Vue3 comparison:

https://user-images.githubusercontent.com/5413308/226199960-ae3895ae-99cf-4c3a-a781-4248d396b9d3.mov

What is expected?

✓ In Vue2, changes on an inner <TransitionGroup> applied .move class on the parent <TransitionGroup> children: https://codesandbox.io/s/ecstatic-moser-ub9g0h?file=/src/App.vue

What is actually happening?

❌ In Vue3, changes on an inner <TransitionGroup> do not apply the .move class on the parent <TransitionGroup> children anymore: https://codesandbox.io/s/cool-bush-jtxuou?file=/src/App.vue

Any additional comments?

Both examples links above contains the same code, located in App.vue.