Estoy usando vue3-carousel pero cada vez que uso el carrusel parece "desactivar" otros eventos.

ACTUALIZAR Esto solo sucede en la vista de Android y móvil en el navegador

Envié un informe de error aquí :

Por ejemplo, en el siguiente ejemplo, después de haber estado usando y desplazándome con el carrusel, necesito hacer clic dos veces en el botón "hola" para que se imprima en la consola. Después de presionarlo, parece estar "activado" y reacciona cada vez que se presiona hasta que vuelvo a usar el carrusel vue3 cuando todo comienza de nuevo.

Lo extraño es que funciona sin problemas con el codepen proporcionado, pero cuando estoy usando el mismo código en mi proyecto Quasar, no funciona y necesito presionar el botón dos veces para que reaccione después de haber estado usando el carrusel vue3. .

Estoy usando:

 "vue3-carousel": "^0.1.40" "quasar": "^2.0.0", "vue": "^3.0.0",

Me estoy quedando sin opciones. ¿Alguien tiene alguna sugerencia sobre cómo depurar esto aún más?

Aquí está el código y el codepen y, como escribí, el codepen funciona cuando se cambia presionando el botón "hola" y deslizando el componente, pero en mi código no reaccionará la primera vez que se presione el botón Hola después de usar el carrusel.

 <template> <q-header style="height: 50px"> <q-btn style="background-color: blue" @click="test()">Hello</q-btn> </q-header> <carousel :items-to-show="1.5"> <slide v-for="slide in 10" :key="slide"> <div style="height: 10vh; background: red; width:90%"> {{ slide }} </div> </slide> <template #addons> <navigation /> <pagination /> </template> </carousel> </template> <script> import 'vue3-carousel/dist/carousel.css'; import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'; export default { name: 'App', components: { Carousel, Slide, Pagination, Navigation }, data () { return { count: 0 }; }, methods: { test () { this.count++; console.log('Hello world!', this.count); } } }; </script>