Vue watch on v-model property only fired once

Question

I have a Vue component very similar to the example reported here:

watch: {
    query(n, o) {

        // Display loading animation
        this.loading = true;

        // Search debounced
        this.debouncedSearchUser();
    }
},

Where query is a String variable bound to a text input using v-model:

data() {

    return {
        query: "",
        loading: false,
        results: []
    }
},

Everything works fine, except on chrome for android where the watch trigger is only fired once (when query changes from "" to whatever I write).

Any idea?

EDIT:

The problem seems to be related with the v-model directive: I made some experiments with native javascript events and the value of v-model is not updated until I unfocus the input. If anyone's interested here is the binding:

<input v-model="query" class="input-text-light pad-s-m f-m"/>

Any way to get around this using watch and v-model?

Answer 1

It seems to be a bug for v-model. Since v-model is just a syntactic sugar. I think you can use the code below to make it work.

<input v-bind:value="query" v-on:input="query = $event.target.value"></input>