Issue with buttons on Vue3-Ts

[paulbgomez]

Hello!

I'm trying to make a swiper slider for a reusable component like so:

<template>
        <swiper :navigation="hasArrows">
                <button v-if="hasArrows" @click="swiper.slidePrev()" class="btn swiper-button-prev">
                    <svg v-svg :symbol="icon" class="icon"></svg>
                </button>
                    <slot></slot>
                <button v-if="hasArrows" @click="swiper.slideNext()" class="btn swiper-button-next">
                    <svg v-svg :symbol="icon" class="icon"></svg>
                </button>
        </swiper>
</template>

<script>
  import { useSwiper, Swiper } from 'swiper/vue';

  export default {
    components: { Swiper },
    props: {
             // navigation
            hasArrows: {
                type: Boolean,
                default: false
            },
    },
    setup() {
      const swiper = useSwiper();

      return {
        swiper,
      };
    },
  };
</script>

Then I instantiate this component on a view looping through an image array for example:

<Slider :has-arrows="true">
    <template #default>
        <swiper-slide
            v-for="slide in images"
             :key="slide"
         >
              <img :src="slide" />
         </swiper-slide>
   </template>
</Slider>

But when I try to use the buttons, they do not work. Only swiper buttons work. Any idea why?

Thanks!