Vue version

3.3.2

Link to minimal reproduction

https://github.com/tdkbzh/transition-group-navigation-bug

Steps to reproduce

We have 2 pages:

• /search
• /search/results (nested page, taking a search query in the URL)

We have a TransitionGroup containing the search history, shared by all pages:

<div>
  <!-- left panel (side menu) -->
  <div>
    <TransitionGroup> <!-- search history -->
  </div>

  <!-- right panel (page content) -->
  <div>
    <RouterView /> <!-- include pages content -->
  </div>
</div>

On click on the search button, we navigate to the results page: /search/results?search=hitchcock

When arriving on the results page, we store the search on the history (onMounted) writing it on the store:

// animation fails !
onMounted(async () => { // /search/results is mounted
  storeSearchInHistory(); // add current search to pinia store
})

The TransitionGroup fails to execute the animation (.move class is not applied):

https://github.com/vuejs/core/assets/102464771/bf322baf-0af4-44a5-9d3f-fcbb181d4d82

Waiting for 1ms (or nextTick) before writing to the store "fixes" the problem:

// animation succeed
onMounted(async () => { // /search/results is mounted
    setTimeout(() => {
      storeSearchInHistory();
    }, 1)
})

https://github.com/vuejs/core/assets/102464771/d75528ed-5bf2-4176-ba17-1fdb35366286

What is expected?

.move class should be applied to the TransitionGroup elements, even if the changed is caused in the new page onMounted lifecycle method.

What is actually happening?

.move class is not applied.

System Info

No response

Any additional comments?

No response