title: Binding a Select2 select to a Vue js model data
body: <p>I'm using select2 to enhance an html select element. I want to bind the value of the select element to a Vue variable, however the Select2 seems to be preventing this.</p>
  
  <p>What's the best way to achieve this data binding and event listening whilst retaining the Select2 behaviour. I imagine it's a case of linking the select2 events to the Vue instance.</p>
  
  <p>I've made <a href="http://jsfiddle.net/w3ygx6yp/3/" rel="noreferrer">a fiddle</a> demonstrating the problem (does not run below but works on jsfiddle):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#things').select2();
  
  new Vue({
    el: "#vue-example",
    data: {
      thing: null,
      thing2: null
    },
    methods: {
      log: function(str) {
        $('#log').append(str + "&lt;br&gt;");
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>select {
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="vue-example"&gt;
    &lt;label&gt;Select2 Select Box&lt;/label&gt;
    &lt;select name="things" id="things" v-model="thing" v-on="change: log('you changed thing1')"&gt;
      &lt;option value="1"&gt;One&lt;/option&gt;
      &lt;option value="2"&gt;Two&lt;/option&gt;
      &lt;option value="3"&gt;Three&lt;/option&gt;
      &lt;option value="4"&gt;Four&lt;/option&gt;
      &lt;option value="5"&gt;Five&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;label&gt;Native Select Box&lt;/label&gt;
    &lt;select name="things" id="things" v-model="thing2" v-on="change: log('you changed thing2')"&gt;
      &lt;option value="1"&gt;One&lt;/option&gt;
      &lt;option value="2"&gt;Two&lt;/option&gt;
      &lt;option value="3"&gt;Three&lt;/option&gt;
      &lt;option value="4"&gt;Four&lt;/option&gt;
      &lt;option value="5"&gt;Five&lt;/option&gt;
    &lt;/select&gt;
    &lt;pre&gt;{{ $data | json }}&lt;/pre&gt;
    &lt;div id="log"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>