VueJS Select2 directive doesn't fire @change event

Question

As title says, I registered Select2 directive for VueJS 1.0.15 using example from their page. I want to catch @change event but it doesn't work.

HTML:

<select v-select="item.service" :selected="item.service" @change="serviceChange(item)">
  <option value="1">test 1</option>
  <option value="2">test 2</option>
</select>

JS:

Vue.directive('select', {
    twoWay: true,
    params: ['selected'],
    bind: function () {
        var self = this
        $(this.el)
            .select2({
                minimumResultsForSearch: Infinity
            })
            .val(this.params.selected)
            .on('change', function () {
                console.log('changed');
                self.set(this.value);
            })
    },
    update: function (value) {
        $(this.el).val(value).trigger('change')
    },
    unbind: function () {
        $(this.el).off().select2('destroy')
    }
});

var Checkout = new Vue({
      el: '.Checkout',
      methods: {
      serviceChange: function (item) {
          console.log(item);
      },
    }
});

Answer 1

Expanded on Alberto Garcia answer.

var selectDropDown = $(".select-drop-down").select2();

selectDropDown.on('select2:select', function (e) {
    var event = new Event('change');
    e.target.dispatchEvent(event);
});