Slick carousal not working with Vue JS and Laravel 9 - vuejs3

Question

I am trying to implement a slick carousel using vuejs-3 in laravel-9.
I can see the elements one below the other but no carousal.
Below is my code:
project_folder\resources\js\components\partials\Contact\client.vue
import Slick from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
export default{
name: "Contact_components2",
components: { Slick },
setup(){
const swiperTextBase = ref([
{
author : 'Steve Taylor,',
description : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quiafugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.',
img : 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp',
details : 'CTO, Eagle Investment Systems'
},
{
author : 'Steve Taylor,',
description : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quiafugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.',
img : 'https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp',
details : 'CTO, Eagle Investment Systems'
},
]);
return{
swiperTextBase,
modules:[Pagination, Autoplay]
}
},
}
<template>
<div class=" row">
<div class="col-md-10">
<slick
:arrows="true"
:dots="true"
:autoplay="true"
:focusOnSelect="true"
:speed="500"
:slidesToShow="2"
:slidesToScroll="1"
:loading= "true"
:errored= "false"
>
<div v-for="text in swiperTextBase" :key="text.description">
<div>
<p class="fw-bold text-start mb-5">
<i class="bi bi-quote"></i><br>
{{text.description}}
</p>
</div>
<div class="d-flex">
<div>
<img class="rounded-circle shadow-1-strong mb-4" :src="text.img" alt="avatar" style="width: 100px;" />
</div>
<div class="p-3 text-start">
<h5 class="mb-3">{{text.author}}</h5>
<p>{{text.details}}</p>
</div>
</div>
<div class="text-end">
<a href="#" class="text-decoration-none">
Learn More
<i class="bi bi-arrow-right-circle-fill"></i>
</a>
</div>
</div>
</slick>
</div>
</div>
</template>