JQuery not working with Vuejs
<p>I'm trying to add a JQuery plugin, owl carousel to a list that rendered using Vuejs.</p>

<h3>HTML</h3>

<pre><code>&lt;h4&gt;1. Vuejs rendered items with OWL Carousel (not working)&lt;/h4&gt;
&lt;div id="user" class="owl-carousel"&gt;
    &lt;div class="item" v-for="user in users"&gt;{{ user.name }}&lt;/div&gt;
&lt;/div&gt;

&lt;h4&gt;2. Pure HTML with OWL Carousel (working)&lt;/h4&gt;
&lt;div class="owl-carousel"&gt;
    &lt;div class="item"&gt;Sunny&lt;/div&gt;
    &lt;div class="item"&gt;Michel&lt;/div&gt;
    &lt;div class="item"&gt;Daneil&lt;/div&gt;
    &lt;div class="item"&gt;Sony&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h3>JS</h3>

<pre><code>var list = new Vue({
    el: '#user',
    data: {
        users: []
    },
    methods: {
        listUsers: function() {
            var users = [
            {
                id: 1,
                name: 'John'
            },
            {
                id: 2,
                name: 'Deo'
            },
            {
                id: 3,
                name: 'Anjela'
            },
            {
                id: 4,
                name: 'Samantha'
            }
            ];
            this.$set('users', users);
        },

        installOWLcarousel: function() {
            $('.owl-carousel').owlCarousel();
        }
    },
    ready: function() {
        this.listUsers();
        this.installOWLcarousel();
    }
});
</code></pre>

<p>You can find the entire code from: <a href="https://jsfiddle.net/v18yjmuq/12/" rel="noreferrer">https://jsfiddle.net/v18yjmuq/12/</a></p>

<p>I seem JQuery is complete it's execution before Vuejs rendered the list. How to avoid that issue? Can I run JQuery after fully rendered the Vuejs for loop items?</p>