Issue Using OwlCarousel with Vue.js

I am using vue.js and OwlCarousel and every time I use the v-for with the carousel it doesn't show me the style of the carousel it only show me the Images in column.

this the request to an API:

<script>
export default {
  data: {
    videos_p: []
  },
  mounted() {
    axios.get("xxxxxxxxxxx")
      .then(response => {
        this.videos_p = response.data
        console.log(this.videos_p)
      })
  }
}

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    items: 4,
    loop: true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 900,
    autoplayHoverPause: true,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true,
        loop: false,
        margin: 20
      }
    }
  });

})
</script>

and this is the html:

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
          <div class="item" v-for="video in videos_p">
            <img v-bind:src="video.image_url">
          </div>
        </div>
      </div>
    </div>
  </section>

but every time that I use vue it doesn't show me the carousel it only show me the images in column, but if I use the example like this it works fine:

  <section id="demos">
    <div class="row">
      <div class="large-12 columns">
        <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div>
      <div class="item">
        <img src="http://placehold.it/300x150&text=FooBar1">
      </div> -->
        </div>
      </div>
    </div>
  </section>

any idea where I am making a mistake?????