Vuejs binding not working if update by jquery

Best way is to let jQuery change the data instead of the input val to keep everything synced.

Like this:

let mainState = { inputVal: 'testing' };

let app = new Vue({
  el: '#app',
  data: mainState,
  methods: {
    vueThing() {
      this.inputVal = 'Vue value';
    }
  }
}); 

$('#jqThing').on('click', function() {
  mainState.inputVal = 'jQuery Value';
});

https://jsfiddle.net/6evc921f/

Or wrap the jQuery elements constructors in Vue components and just use them in Vue enhanced pages

its too late to answer but for anyone stumbles on this in future can use my suggestion to work with .

I had read somewhere that This is a jQuery problem, trigger/val() doesn't dispatch native events in some cases. So we will dispatch native JS Event after changing values with jQuery val()

$("#test").val("testing")[0].dispatchEvent(new Event('input'))

Points to note :-

• in Vue, text and textarea elements use input event and checkboxes, radio and select uses change as an event. So dispatchEvent accordingly;
• i assume that using id selector $("#test") you are applying this to single dom element thats why i have choosed [0] th element. if you are intending it to multiple elements then you can use for loop to dispatchEvent on al.

reference :- Vue Issues on Github