por favor ayúdame a resolver lo siguiente. Estoy tratando de agregar el evento onclick a mi control deslizante, y mientras estoy usando Vue 3, el esling me da el error 'se le asigna un valor pero nunca se usa, no hay variables sin usar'. el siguiente es mi código, ¿podría alguien ayudarme?

 <template> <div class="carousel"> <slot :currentSlide="currentSlide" /> <!-- Navigation --> <div class="navigation"> <div class="toggle-page left"> <i @click="prevSlide" class="bi bi-arrow-left-short"></i> </div> <div class="toggle-page right"> <i @click="nextSlide" class="bi bi-arrow-right-short"></i> </div> </div> </div> </template> <script> import { ref, onMounted } from "vue"; export default { setup() { const currentSlide = ref(1); const getSlideCount = ref(null); // next slide const nextSlide = () => { if (currentSlide.value === getSlideCount.value) { currentSlide.value = 1; return; } currentSlide.value += 1; }; // prev slide const prevSlide = () =>{ if(currentSlide.value === 1){ currentSlide.value = 1; return; } currentSlide.value -= 1; } onMounted(() => { getSlideCount.value = document.querySelectorAll('.slide').length; }) return { currentSlide }; }, }; </script>