[BUG]: text-animations/rotating-text

[Barry-Flynn]

Describe the issue

Hello, I encountered an issue while using the RotatingText component. When the component uses both watch with immediate: true and onMounted to start the interval, it creates two timer instances, causing the text rotation to actually execute twice each time, thus skipping some texts.

Problem Description:

The text array [1,2,3,4,5,6,7,8,9,10,11] displays in the order: 1, 3, 5, 7, 9, 11, 2, 4, 6, 8, 10, instead of the normal sequential order.

Root Cause:

• watch with immediate: true executes startInterval() once during component initialization
• onMounted hook executes startInterval() again
• This creates two timers, each interval triggering two next() calls

Solution:

Remove { immediate: true } from the watch and only start the timer in onMounted.

---

I'm curious why the demo on the VueBits website works correctly? Is it due to different usage scenarios or configurations in the example?

Reproduction Link

https://stackblitz.com/edit/vitejs-vite-edphqgxh?file=src%2Fcomponents%2FRotatingText.vue

Steps to reproduce

Please open the stackblitz code demo

Validations

• I have checked other issues to see if my issue was already reported or addressed