Conflict between Splide.js loop clones and Vue 3 reactivity

[thestan12]

Hello !

When using type: 'loop' with Splide, the library seems creates cloned slides directly in the DOM to simulate an infinite loop. These clones are not Vue components — they are static HTML copies and do not go through Vue’s lifecycle (setup(), onMounted(), etc.).

As a result, any logic relying on Vue's reactivity or lifecycle (such as initializing an ECharts instance) seems does not run. The charts are not rendered in these cloned slides. Even calling .resize() manually does nothing, since ECharts was never initialized.

Switching to type: 'slide' resolves the issue, because all slides are actual Vue components and lifecycle hooks are respected.
Is there a way to use loop: true while ensuring that slides are cloned as actual Vue components? Or alternatively, is there a way to disable DOM cloning and use Vue-based slide rendering instead?

Context:

• Vue 3
• @splidejs/vue-splide
• vue-echarts (ECharts)
• One ECharts component rendered per slide

Thank you !