laravel - 响应性在 Vue 组件中不起作用

Question

我正在为旅游网站开发 Laravel + Vue 项目。

当我将 html 页面分解为 vue 组件块时，我的网页的响应性无法正常工作。

下面是完全从 laravel 的刀片文件加载页面时的屏幕截图：

上述输出代码：listing.blde.php

... </div>          
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="other-deals owl-carousel" id="quicklink">
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Gardens, Zoo Aquariums</p>
                                <img src="assets/images/gardenszoo.png">    
                            </a>        
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Iconic Structures & Buldings </p>
                                <img src="assets/images/iconic.png">    
                            </a>
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Day Trips & Tours</p>
                                <img src="assets/images/daytrip.png">   
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Live Show & Concerts</p>
                                <img src="assets/images/liveshow.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>
                        </div>
                    </div>  
                </div>
            </div>
        </div>      
    </section>.....

下面是我在上图中创建突出显示部分的组件时的屏幕截图：

上述输出代码：listing.blade.php

...</section>

<themefilter></themefilter>

...<section>

主题过滤器.vue：

<template>
    <div>

        <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="other-deals owl-carousel" id="quicklink">
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Gardens, Zoo Aquariums</p>
                                <img src="assets/images/gardenszoo.png">    
                            </a>        
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Iconic Structures & Buldings </p>
                                <img src="assets/images/iconic.png">    
                            </a>
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Day Trips & Tours</p>
                                <img src="assets/images/daytrip.png">   
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Live Show & Concerts</p>
                                <img src="assets/images/liveshow.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>
                        </div>
                    </div>  
                </div>
            </div>
        </div>      
    </section>

    </div>
</template>

<script>
export default {

    name: 'themefilter',

    props : [],

    data: function(){

    },

    methods:{
        applyCarousel:function(){

            var t = this;

            $('#quicklink').owlCarousel({
                loop: true,
                items:1,
                margin: 5,
                dots: false,
                stagePadding: 0,
                nav: true,
                navText: ['<span aria-label="Previous" class="prevslider">&#60;</span>','<span aria-label="Next" class="nextslider">&#60;</span>'],
                responsive:{
                    0:{
                        items: 1
                    },
                    600:{
                        items: 5
                    },
                    1000:{
                        items: 5
                    }
                }
            });

            
        }
    },

    mounted() {

        this.applyCarousel();
        
    }
};
</script>

有谁知道我该如何解决这个问题？