How to update reactive Objects (and properties in general)?

Question

Vue.js documentation on Reactivity in Depth mentions that

a property must be present in the data object in order for Vue to convert it and make it r

Answer 1

This is because in the first case, you are running a setter on tags (because you are reassigning it) - which Vue has wrapped and can detect. In the second case, you're running setters on nested properties that were not in your data: { tags: { definition, so they are not reactive.

The Change Detection Caveats section in the documentation covers this, though not exactly the same as your case (the nested properties situation). You would have to declare your data like:

data: {
  tags: {
    hello: null,
    world: null,
  }
}