title: Select2 on change event is not working in Vuejs
body: <p>I was working with select2 in vuejs , I found vuejs is not working with jquery select2 as vuejs is working with navite html.</p>
  
  <p>I am using this code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.directive('select', {
          twoWay: true,
          bind: function () {
              $(this.el).select2()
              .on("select2:select", function(e) {
                  this.set($(this.el).val());
              }.bind(this));
              },
          update: function(nv, ov) {
              $(this.el).trigger("change");
          }
      });
      var app = new Vue({
        el: '#app',
        data: {
          supplier_id: "niklesh"
        }
      })
      $('#supplier_id').select2({});</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css"&gt;
  &lt;div id="app"&gt;
    {{ supplier_id }}
  
  &lt;select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'&gt;
      &lt;option value="atul"&gt;Atul&lt;/option&gt;
      &lt;option value="niklesh"&gt;Niklesh&lt;/option&gt;
      &lt;option value="sachin"&gt;Sachin&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please share your reply to handle this problem.</p>