[Vuejs]-Is it possible to detect if a change event was triggered by a click on a Vue select element?

See vue-js-selected-doesnt-triggering-change-event-select-option, it appears that select does not trigger @change when v-model is updated by JS (only when the selected value is changed by user).

A directive can add the functionality

Vue.directive('binding-change', {
  update: function (el, binding, vnode) {
    const model = vnode.data.directives.find(d => d.name === 'model')
    if (model) {
      binding.value(model.value)
    }
  }
})

use like

<select id="testSelect" 
  v-binding-change="onChange" 
  v-model="mySelectModel" 
  @change="onChange($event)">

Not sure about the parameter to onChange – I’ll give it a test.

Similar to this suggested solution, you can make a settable computed that you v-model in your widget:

1. The get function simply returns the data item
2. The set function does whatever you want a change in the widget to do, in addition to setting the data item

Other code can change the data item directly and will not execute the set code of the computed.

new Vue({
  el: '#app',
  data: {
    values: ['one','two','three'],
    selectedItem: 'two'
  },
  computed: {
    wrappedSelectedItem: {
      get() { return this.selectedItem; },
      set(value) {
        console.log("Changed in widget");
        this.selectedItem = value;
      }
    }
  },
  methods: {
    changeToThree() {
      console.log("Stealth change!");
      this.selectedItem = 'three';
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <select v-model="wrappedSelectedItem">
    <option v-for="value in values" :value="value">{{value}}</option>
  </select>
  <button @click="changeToThree">Set to three</button>
</div>