Vue 3 Carousel unexpected behavior - vuejs3

Question

I have a Vue3 carousel inside a Single file component
package.json
"vue3-carousel": "^0.1.40"
SFC
import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import '#/assets/scss/Carousel.scss';
<Carousel :wrap-around="true" class="box-carousel" :autoplay="2000" :transition="500">
<Slide v-for="slide in slides" :key="slide.id">
<div class="mx-auto w-[85%] md:w-[90%] rounded-lg p-5 bg-blue-secondary-5 h-full dark:bg-blue-secondary-5 dark:text-black-dark-100">
<!-- Box Description -->
<div class="grid grid-cols-5 gap-5 mb-5">
<div class="col-span-1">
<div class="rounded-full h-11 w-11 bg-black-20 flex items-center justify-center">
<p class="uppercase font-bold text-sm">{{slide.title}}</p>
</div>
</div>
<div class="col-span-4 text-left">
<div class="ml-3 md:ml-0">
<p class="font-bold">{{slide.name}}</p>
<p class="text-black-40 text-xs">{{slide.date}}</p>
</div>
</div>
</div>
<!-- End Box Description -->
<!-- Box Comment -->
<div class="text-left mb-8">
<p class="text-sm ">
{{slide.comment.substring(0,130)}}
</p>
</div>
<!-- End Box Comment -->
<!-- Box Actions -->
<div class="grid grid-cols-6 gap-5 absolute bottom-5">
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-blue-secondary-100">
<UndoIcon width="10" class="fill-blue-secondary-100 mr-2 hidden md:block" />
Responder
</a>
</div>
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-black-40 underline">
Ver contexto
</a>
</div>
<div class="col-span-2">
<p class="text-xs md:text-sm flex items-center justify-end md:justify-start relative top-1">
<span class="h-2 w-2 rounded-full bg-green-primary-100 inline-block mr-5 md:mr-1 relative top-[-1px]"></span>
<span class="hidden md:block">aprovado</span>
</p>
</div>
</div>
<!-- End Box Actions -->
</div>
</Slide>
<template #addons>
<Navigation />
</template>
</Carousel>
But the transition behavior of the slides is not as expected. It is just changing withouth the transition/translate position effect
This is how it is:
Expected effect: (by the way, the carousel sometimes spontaneously display the expected behavior like when after some hot module replacement refresh happens after saving some edit in VSCode and there is a refresh in the vue app like this):
Thanks in advance for any advice!! Happy new year !! 🙂