Slick carousal not working with Vue JS and Laravel 9

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:

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