owl carousel在使用元素类循环的vue js上不起作用

我最近开始使用 VUEJS 在我的web应用程序中。当我在每个元素上单独使用VUE时,所有的工作都很好,但是它会生成多个Ajax请求来获取JSON数据,而我不喜欢这些数据,所以我把所有的东西组合在一起,并通过类循环来呈现数据,但是现在我的问题是页面满负荷时。 Owl Carousel 只处理第一个元素 OwlCarouselX ID.请任何人帮助我,我刚开始使用 vue 就在昨天。

<div id="Vue">
    <div class="RenderApplicationVueList">
        <div id="OwlCarouselX">
                <div v-for="row in store">
                    <div>{{row.name}}</div>
                </div>
            </div>
    </div>

    <div class="RenderApplicationVueList">
        <div class="OwlCarouselY">
            <div v-for="row in food">
                <div>{{row.name}}</div>
            </div>
        </div>
    </div>

    <div class="RenderApplicationVueList">
        <div class="OwlCarouselY">
            <div v-for="row in grocery">
                <div>{{row.name}}</div>
            </div>
        </div>
    </div>
</div>

我的vue javascript示例

<script>
const elements = document.getElementsByClassName("RenderApplicationVueList");
for (el of elements){
    new Vue({
      el: el,
      data: {
        food: [],
        grocery: [],
        store: []
      },

      methods: {
            extag: function(string){
                    var exploded = '';
                    if(string != ""){ 
                        var arrayOfTags = string.split (',');
                        for(var i=0; i < arrayOfTags.length; i++) { 
                            exploded += '<li data-value="'+ arrayOfTags[i]+'">'+ arrayOfTags[i]+'</li>';
                        }
                    }
                return  exploded;
            }
        },

        created: function() {
            fetch (ajax_appserver("mroot", "api/api_loadIndex.php?fetch_api=true&appApi=vue"))
            .then(response => response.json())
            .then(json => {
                this.food = json.food;
                this.grocery = json.grocery;
                this.store = json.store; 

               /*Render carousel*/
                Vue.nextTick(function(){
                     $('.OwlCarouselX').owlCarousel({
                        lazyLoad:true,
                        stagePadding: 50,
                        loop: false,
                        margin:15,
                        responsiveClass: true,
                        merge: false,
                        nav: false,
                        dots: false,
                        responsive:{
                            0:{items:1,},
                            600:{items:2,},
                            1000:{ items:3,}
                        }
                    });

                    $("#OwlCarouselY").owlCarousel({
                        lazyLoad:true,
                        loop:false,
                        margin:10,
                        responsiveClass:true,
                        merge:true,
                        rewindNav: false,
                        dots: false,
                        nav:false,
                        responsive:{
                            0:{items:1,},
                            600:{items:2,},
                            1000:{ items:3,}
                        }
                    });
                     $( "img.useLoadLazyImage").lazy();
                }.bind(this));
            });
        }
    });
}
</script>