Reactive object nested in the reactive object. Any issues expected?

[WhereJuly]

const child = {b: 2};
const parent = reactive(
  { 
    a: 1, 
    child: reactive(child)
  }
)

What happens if I apply a reactive to a nested object that is a property of the parent object that is made reactive too? Do you expect any issues with this?

UPD: What I found so far myself is that the watcher's callback on parent.child will get both new and old state equal. So you cannot distinguish what exactly changed in child but only see some changes happened.

UPD: The soultion to the latter finding is to copy or clone the watched reactive object as per below discussion.

[LinusBorg]

What you found is not related to the specific example you provided. When you watch a reactive object with watch(parent.child, ...) and then mutate parent.child.b, there will not be "old" state, because you mutated the child object. for "old" state to exist, a copy of child would have to be created prior to the mutatation.

You can get something like that withwatch() => ({ ...parent.child}), ...). now Vue observes this getter function, and this getter function will create a shallow copy of the object whenever the watch is triggered. Now you will have a new and old object (but plain ones, none will be the original instance of child).

watch() => ({ ...parent.child}), (newChildCopy, oldChildCopy) => {
  console.log(oldChildCopy) // => { b: 2 }
  console.log(newChildCopy) // => { b: 3 }
  parent.child === oldChildCopy // false
  parent.child === newChildCopy // false
  isReactive(oldChildCopy) /// false
  isReactive(newChildCopy) /// false
})

parent.child.b = 3

[WhereJuly]

@LinusBorg Still what about the question on issues for this nested reactive's. Is this something explored by the team or not?

[LinusBorg]

There is no concern whatsoever. In fact, when you do not wrap it in reactive() yourself, Vue will do it anyway when parent.child is being accessed for the first time. Wrapping it separately before has no side effect or anything.

[WhereJuly]

@LinusBorg Thanks. Great. Just for info when I try to watch(this.child, ()=>{...}) in the actual parent constructor (not seen in the simplified example), the watcher callback is not triggered. When wrap the child in the reactive that does triggered.

[LinusBorg]

of course. you can't watch nonreactive objects. No surprise here

[WhereJuly]

@LinusBorg

In fact, when you do not wrap it in reactive() yourself, Vue will do it anyway when parent.child is being accessed for the first time.

of course. you can't watch nonreactive objects. No surprise here

This probably means that I normally can watch watch(parent.child) after reactive(parent) as Proxy monitors child accesses only from parent's level. But watch(this.child, callback) attached in parents constructor does not work as child itself is not wrapped in Proxy. So another explicit Proxy for child (child: reactive(chiild)) needed to get it watchable.