Carousel在Vue js中不起作用，但在简单的php文件中起作用

Question

我在vue应用中使用owl.carousel。但是轮播没有显示在页面上。我的index.html中包含（owl.carousel.min.css）和其他相关文件（jquery，bootstrap）。这些文件也可以在浏览器的网络选项卡中看到，这意味着文件正在加载但没有看到轮播（或图像）。当我从索引中删除owl.carousel.min.css时，它将在轮播中使用的图像显示在一个顶部另一个但没有旋转木马。不知道可能是什么问题。谢谢您。

       <div class="banner-slider">
        <div class="container">
            <div class="row">
                <div class="carousel-wrap">
                    <div id="sync2" class="navigation-thumbs owl- 
                       carousel">
                        <div class="item">
                            <img src="./images/bslide4.png">
                            <div class="details">
                                <p>Alex</p>
                                <small>Guitarist</small>
                            </div>
                        </div>
                        <div class="item">
                            <img src="./images/bslide1.png">
                            <div class="details">
                                <p>MIRA</p>
                                <small>Filmmaking</small>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
      </div>

和

    var sync1 = $(".slider");
    var sync2 = $(".navigation-thumbs");

    var thumbnailItemClass = '.owl-item';
    var slides = sync1.owlCarousel({
    video:true,
    startPosition: 3,
    items:1,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayHoverPause:false,
    nav: false,
    dots: true,
    responsive: {
        0: {
            items: 1,
            loop:true
        },
        600: {
            items: 1,
            loop:true
        },
        1000: {
            items: 1,
            loop:true
        }
    }
  }).on('changed.owl.carousel', syncPosition);