VueJS event binding in v-for
<p>I'm displaying a list of objects with VueJS like so:</p>

<pre><code>&lt;div v-for="register in registers"&gt;
    &lt;input type="checkbox" v-model="register.isEnabled"&gt;
    &lt;input type="text" v-model="register.name" :disabled="!register.isEnabled"&gt;

    &lt;span v-if="register.saved"&gt;Saved&lt;/span&gt;
    &lt;span v-else&gt;&lt;a @click="save(register)"&gt;Save now&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>What I'd like to do, is to watch for changes in this object's values and set the <code>saved</code> attribute to <code>false</code>. This is an exemplary version of my Vue instance:</p>

<pre><code>new Vue({
    el: '#app',
    data: {
        registers: [
            { isEnabled: true, name: 'Register 1', saved: true },
            { isEnabled: false, name: '', saved: true },
        ]
    },
    methods: {
        save: function(event) {
            // Save object, set saved to true
        }
    }
});
</code></pre>

<p>I've tried settings an onchange listener to the div with the <code>v-for</code> attribute:</p>

<pre><code>&lt;div v-for="register in registers" @change="onChange(register)"&gt;
</code></pre>

<p>However this only triggers when the first input element is changed (e.g. the checkbox).</p>

<p>Am I able to somehow listen to all changes made to this register object, without having to add a <code>@change</code> event to every single input? If so, how?</p>