vuejs2 - vue2js - ディレクティブで選択された選択値で選択されたインデックスを伝播する方法

Question

以下のコードを見てください。最初の選択ボックスは、選択した jsで作成されます。変更されると、変更された値がバインド先のモデルに伝播されます ( cityid)。2 番目の通常の選択ボックスは正常に機能しており、その値が反映されています。

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'}
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css" >  
  
<div id="app">
    selected city id # {{ cityid }}
    <hr>
    <select v-chosen v-model="cityid">
      <option v-for="option in cities" :value="option.id" >{{option.value}}</option>
    </select>
    <hr>
    <select  v-model="cityid">
      <option v-for="option in cities" :value="option.id" >{{option.value}}</option>
    </select>
    
  </div>