Vuejs binding not working if update by jquery

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

just use the @change event:

<input @change="$emit('update:testModel', $event.target.value)" id="test" v-model="testModel"/>

You could also use the .lazy modifier:

<input id="test" v-model.lazy="testModel"/>

as stated by the docs: By default, v-model syncs the input with the data after each input event (with the exception of IME composition as stated above). You can add the lazy modifier to instead sync after change events.

It doesn't work because v-model uses the input event by default which is not fired when you do:

$("#test").val("testing");

Which is one reason why you shouldn't inject anything in to the DOM directly unless you have a specific reason to do so.

Try typing in that box and clicking showValue and you will see that it has updated correctly because the input event has fired.

If you really want to go down this road (and I recommend that you don't), then you could just write your own custom directive, something like:

Vue.directive('model-inject', {
    bind: function(el, binding, vnode) {
        el.value = vnode.context[binding.expression];
        
        // Create inject event and add it to Vue instance (available by this.injectEvent)
        vnode.context.injectEvent = new CustomEvent("inject");
        // Attach custom event to el
        el.addEventListener('inject', function() {
            vnode.context[binding.expression] = el.value;
        });
        
        // Also bind input
        el.addEventListener('input', function() {
            vnode.context[binding.expression] = el.value;
        });
    },
    update: function(el, binding, vnode) {
        el.value = vnode.context[binding.expression];
    }
});

That binds a custom event called inject to the element as well as the default input event, so you use it like this:

<input id="test" v-model-inject = "testModel" />

Then when you update anything via jQuery you can do:

document.getElementById("test").dispatchEvent(this.injectEvent);

Here's the JSFiddle: https://jsfiddle.net/q591gn01/

Instead of using jQuery you could either create a global function to update your test model or you could look in to Vuex https://vuex.vuejs.org/en/intro.html

You should not try to update the DOM with jQuery when using Vue.