Edit in JSFiddle

<div id="el">
  <p>Selected: {{selected}}</p>
  <select v-select="selected">
    <option value="0">default</option>
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
  </select>
</div>
Vue.directive('select', {
  twoWay: true,
  priority: 1000,

  params: ['options'],
    
  bind: function () {
    var self = this
    $(this.el)
      .select2()
      .on('change', function () {
        self.set(this.value)
      })
  },
  update: function (value) {
    $(this.el).val(value).trigger('change')
  },
  unbind: function () {
    $(this.el).off().select2('destroy')
  }
})

var vm = new Vue({
  el: '#el',
  data: {
    selected: 0,
    options: [
      { id: 1, text: 'hello' },
      { id: 2, text: 'what' }
    ]
  }
})
select {
  min-width: 300px;
}