Vue: watch only fired once

[pqvst]

I have the following scenario:

<template v-for="field in fields">
    <input type="text" v-model="values[field.key]" />
</template>

with the following code:

var vue = new Vue({
    el: "#vue",
    data: {
        fields: [{key:"a"},{key:"b"}],
        values: {}
    },
    watch: {
        values: function (val, old) {
            alert("change!");
        }
    }
});

The problem is that the alert only occures the first time each input field is modified. As far as I can tell this only seems to occur when the two-way binding target uses a variable.

By inspecting the vue data I can see that the values keep updating even though the watch function isn't invoked.

I'm using the method proposed by @yyx990803 in issue #1056.

you can already do that with v-model="form[field.name]".

[yyx990803]

You need a deep watcher.

[maximelebreton]

I have exactly the same scenario with the same problem, and still not working with deep: true:

var vue = new Vue({
    el: "#vue",
    data: {
        fields: [{key:"a"},{key:"b"}],
        values: {}
    },
    watch: {
        values: function (val, old) {
            alert("change!");
        },
        deep: true
    }
});

Have you solved the problem @pqvst?

[pqvst]

@maximelebreton Your usage of deep is incorrect

watch: {
  values: {
    handler: function (val, old) { ... },
    deep: true
  }
}

https://vuejs.org/v2/api/#watch

[maximelebreton]

oups, sorry,
I wanted to make quick, and my example is wrong...

I've made a jsfiddle to be more effective: https://jsfiddle.net/dq90hkb8/
but I ultimately realize that the problem is different from your...

Sorry for my mistake, I'll open a new issue.

[sellomkantjwa]

@maximelebreton I'm having this exact issue. Did you figure out what the problem was?

[beckelmw]

The issue is the way the array is being mutated. See https://vuejs.org/v2/guide/list.html#Array-Change-Detection