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

Answer 1

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)
}