title: vue2js - how to propagate selected index with chosen select value in a direcitve
body: <p>Please look at the code below. The first select box is created with <a href="https://harvesthq.github.io/chosen/" rel="nofollow noreferrer">chosen js</a>. When changed it should propagate its changed value to the model to which its bound (<code>cityid</code>). The second normal select box is working fine and its value is propagated.</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('chosen', {
    bind: function (el, binding, vnode, oldVnode) {
  
      Vue.nextTick(function() {
  
        $(el).chosen({
          width:'100%'
        }).change(function(){
  
          alert($(el).val());
          vnode.context.$emit('input', $(el).val());
          
        });
      });
  
    },
    update: function(el, binding, vnode, oldVnode) {
  
    }
  });
  
  
  new Vue({
    el : '#app',
    data:{
      cityid : 3,
      cities : [
        {id:1, value:'London'},
        {id:2, value:'Newyork'},
        {id:3, value:'Delhi'}
      ]
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
  &lt;script src="https://harvesthq.github.io/chosen/chosen.jquery.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css" &gt;  
    
  &lt;div id="app"&gt;
      selected city id # {{ cityid }}
      &lt;hr&gt;
      &lt;select v-chosen v-model="cityid"&gt;
        &lt;option v-for="option in cities" :value="option.id" &gt;{{option.value}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;hr&gt;
      &lt;select  v-model="cityid"&gt;
        &lt;option v-for="option in cities" :value="option.id" &gt;{{option.value}}&lt;/option&gt;
      &lt;/select&gt;
      
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>