Im using vue3-carousel but whenever I am using the carousel it seems to "deactivate" other events.

UPDATE This only happens in android and mobile view in the browser

I did send a bug report here:

For example in the example below, after I have been using and scrolling with the carousel, I need to click the button "hello" twice for it to print in the console. After I have pressed it, it seems to be "activated" and reacts every time it is pressed until Im using the vue3-carousel again when it all starts over.

The strange thing is that it works without problems with the provided codepen but when I am using the same code in my quasar project it wont work and I need to press the button two times for it to react after I have been using the vue3-carousel.

Im using:

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

Im running out of options. Anyone have a suggestion how to debug this further?

Here is the code and the codepen and as I wrote the codepen works when switching with pressing "hello" button and swiping in the component but in my code it wont react the first time Hello button is pressed after using the carousel

<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>