title: Owl Carousel doesn't work on vue js using loop for element class
body: <p>I recently start using <code>VUEJS</code> for some part on my web application. Everything was working fine when i used vue separately on each element, but it will make multiple ajax request to fetch json data which i don't like, so i combined everything together and loop through the classes to render the data but my problem now is when the page fully loaded <code>Owl Carousel</code> only work on the first element with <code>OwlCarouselX</code> id. Please can anyone help me i just started using <code>vue</code> just yesterday .</p>
  
  <pre><code>&lt;div id="Vue"&gt;
      &lt;div class="RenderApplicationVueList"&gt;
          &lt;div id="OwlCarouselX"&gt;
                  &lt;div v-for="row in store"&gt;
                      &lt;div&gt;{{row.name}}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="RenderApplicationVueList"&gt;
          &lt;div class="OwlCarouselY"&gt;
              &lt;div v-for="row in food"&gt;
                  &lt;div&gt;{{row.name}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="RenderApplicationVueList"&gt;
          &lt;div class="OwlCarouselY"&gt;
              &lt;div v-for="row in grocery"&gt;
                  &lt;div&gt;{{row.name}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My vue javascript example </p>
  
  <pre><code>&lt;script&gt;
  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 &lt; arrayOfTags.length; i++) { 
                              exploded += '&lt;li data-value="'+ arrayOfTags[i]+'"&gt;'+ arrayOfTags[i]+'&lt;/li&gt;';
                          }
                      }
                  return  exploded;
              }
          },
  
          created: function() {
              fetch (ajax_appserver("mroot", "api/api_loadIndex.php?fetch_api=true&amp;appApi=vue"))
              .then(response =&gt; response.json())
              .then(json =&gt; {
                  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));
              });
          }
      });
  }
  &lt;/script&gt;
  </code></pre>