Lãng Tử

Slider owl Carousel không hoạt động khi để trong component của vuejs

Sau khi gọi api thì mình đã lấy được list các item của slides, mình có thử gọi function khởi tạo owlCarousel trong then sau khi gọi api để lấy data nhưng cũng không hoạt động. Sau đó thì mình cho vào watch nhưng kết quả vẫn thế. Trước đó mình có thử cách khởi tạo slider trong 1 file js bên ngoài, đoạn khởi tạo được gọi như sau

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

Dưới đây là component của mình:

<template>
    <div class="banner-slideshow owl-carousel owl-theme">
        <div class="item" v-for="slider in sliders">
            <a :href="slider.link" target="_blank">
                <img :src="slider.image" alt="" />
            </a>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                sliders: []
            }
        },

        watch: {
            sliders: function () {
                $('.banner-slideshow').owlCarousel({
                    autoplay: true,
                    autoplayTimeout: 3000,
                    autoplayHoverPause: true,
                    loop: true,
                    nav: true,
                    items: 1,
                    navText: ["<i class='icon-i-prev'></i>","<i class='icon-i-next'></i>"],
                    lazyLoad: true,
                    lazyLoadEager: 1
                });
            }
        },

        methods: {
            getSliders() {
                axios.get('/api/slide-show').then(response => {
                    this.sliders = response.data
                });
            }
        },

        mounted() {
            this.getSliders()
        }
    }
</script>