title: Vue.JS Owl-Carousel-2 not working on responsive
body: <p>I am working on an application which is done by Owl Carousel for Carousel purpose, here the below NPM package could use for that</p>
  
  <p><a href="https://www.npmjs.com/package/vue-owl-carousel2" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-owl-carousel2</a></p>
  
  <p>Everything is fine but came issues in responsive like the carousel options said the responsive is working under the object options but actually it's not working. </p>
  
  <p>Here is my snippet code:</p>
  
  <pre><code>import carousel from 'vue-owl-carousel2';
  export default {
      name: 'Team',
      components: { carousel }
  }
  
  &lt;carousel 
    :items = 5
    :autoplay = "true" 
    :nav = "false"
    :dots = "true"
    :loop = "true"
    :margin = "30"
    :autoplaySpeed = "true"
    :autoplayTimeout = "5000"
    :responsive = "{
       0:{items:1},576:{items:2},768:{items:2},1200:{items:4},1500:{items:5}
    }"
  &gt;
  
      &lt;div class="team-image"&gt;
            &lt;img src="/image/1.jpg" alt="image"&gt;
      &lt;/div&gt;
      &lt;div class="team-image"&gt;
            &lt;img src="/image/2.jpg" alt="image"&gt;
      &lt;/div&gt;
      &lt;div class="team-image"&gt;
            &lt;img src="/image/3.jpg" alt="image"&gt;
      &lt;/div&gt;
      &lt;div class="team-image"&gt;
            &lt;img src="/image/4.jpg" alt="image"&gt;
      &lt;/div&gt;
      &lt;div class="team-image"&gt;
            &lt;img src="/image/5.jpg" alt="image"&gt;
      &lt;/div&gt;
      &lt;div class="team-image"&gt;
            &lt;img src="/image/6.jpg" alt="image"&gt;
      &lt;/div&gt;
  &lt;/carousel&gt;
  </code></pre>
  
  <p>but the 5 items showing even a mobile device rather than all of the devices.</p>
  
  <p>How can I solve that?</p>
  
  <p>Thanks</p>