Select 2 not working after adding vue js

Question

I don't know why but select2 is not working by just adding vue js. Tried lot of things like searching but no solution. When i remove vue it works and when i add it don't why is that happening in first thing.

Here is working example of it.

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>               
 <script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
<select id="asd" name="asd" class="asd"><option value="1">001 - Środki trwałe x</option><option value="2">001-001 - Środek trwały 1 </option><option value="3">001-002 - Środek trwały 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>
</div>

And javascript code is

$(document).ready(function() {
    $(".asd").select2();
    new Vue({el: '#app'});
});

Or i have also created js fiddle to live demonstrate it we can see it here.

http://jsfiddle.net/8349tck1/39/

I don't know why this is happening but it is a bit weird to me .

Thank You. I hope i can get solution to this weird problem. Really weird.

Answer 1

Vue has own life circle，mouted partly means dom has already loaded.

new Vue({
   el: '#app',
   mounted:function(){
   //use your select2 plugin in vue's mounted period
   $(".asd").select2();
  }

});