How do I watch all keys in a data object in Vue 2 - watch

Question

My data object:
data: {
selected: {
'type': null,
'instrument': null
},
My template:
<select v-model="selected['instrument']" #change="switchFilter('instrument', $event)">
<option v-for="instrument in instruments" :value="instrument.value">#{{ instrument.text }}</option>
</select>
<select v-model="selected['type']" #change="switchFilter('type', $event)">
<option v-for="type in types" :value="type.value">#{{ type.text }}</option>
</select>
How can I watch both selected indexes at the same time? I want to do something like this everytime any of the indexes updates:
watch: {
selected: function(o, n) {
...
}
}

Answer 1

You can use deep option provided by the watcher from vue. As stated in the docs:
To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument. Note that you don’t need to do so to listen for Array mutations.
You code will look like following:
watch: {
'selected': {
handler: function (val, oldVal) {
console.log('watch 1', 'newval: ', val, ' oldVal:', oldVal)
},
deep: true
}
}

Answer 2

I think you can do this:
watch: {
$data: {
handler: function(val, oldVal) {
console.log(val)
},
deep: true
}
},

Answer 3

watch: {
'selected.type': function (newSelectedType) {
console.log(newSelectedType)
},
'selected.instrument': function (newSelectedinstrument) {
console.log(newSelectedinstrument)
}
}
If you are just trying to calculate a new data from selected, you can just use computed properties, since the data of Vue are reactive, the computed properties can also detect the changes of data.
If you want to use a single function to watch the entire object, you can use $watch with deep: true:
mounted () {
this.$watch('$data.selected', this.onSelectedUpdate, { deep: true })
}
note that '$data.selected' is a string, Vue will parse it.
and in your methods:
onSelectedUpdate (newSelected) {
console.log(newSelected)
}