TransitionGroup lag when using requestAnimationFrame

[qminds]

Description

I'm creating the following app logic:

• There is a list of checkable items with a specific price for each.
• There is a calculated total price for checked items.

I'm also animating the number change for the total price using the requestAnimationFrame.
So far so good, the number animation itself works fine.

Problem

However, my TransitionGroup move transition starts to lag when I have the following element structure:

<Transition>
  <div>
    {{ animatedNumber }}
    <TransitionGroup>
      ...
    </TransitionGroup>
  </div>
</Transition>

Notes

• Seems that there is some conflict between the Transition elements and requestAnimationFrame.
• The TransitionGroup move animation works fine if I remove the parent Transition element.
• The TransitionGroup move animation works fine if I remove the number counter based on requestAnimationFrame.
• This issue happens only on Chrome.

Demo

https://stackblitz.com/edit/vitejs-vite-a4hnef?file=src/components/App.vue