FInd a reference to the child object that was changed when watching reactive complex large object

[alvinsw]

When watching a nested reactive object for any changes, is it possible to get a reference to the nested part of the object that was actually changed? Is there a less well-known API or low-level API to do that?
Imagine a very large json object that is being passed on to a (child) custom component. The custom component then modify a nested value inside the object and emit an update event to signal the change. A parameter is passed to the event handler that contains only the changed part to the object instead of the whole object. The parent component then update the object, in which the change will then be reflected in the child component. Now, the very large JSON object needs to be processed in the child component (and the result is cached). So the child component needs to watch for changes to the prop. For performance reason, inside the watch callback, can we efficiently identify the actual nested part that has been changed by hooking into internal vue reactivity system?

A simple example to illustrate the problem:

parent.vue

<script setup>
import child from ‘./child.vue’ 
// a very large object
const data = reactive({
  tag: [‘a’,’b’,’c’],      
  graph: [
    { id: ‘a’, name: ‘testa’, …},
    { id: ‘b’, name: ‘testb’, …},
    …
  ],
  …
}; 
// data only contains parts that has been changed, eg json patch 
function updateData(data) { … } 
</script>
<template>
  <child :modelValue=“data” @update:modelValue=updateData></child>
</template>

child.vue

<script setup>
watch(props, () => {
  // this function will be called when `data` object in parent.vue is modified, 
  // eg `data.graph[0].name=‘a’`
  // can we get the reference to the actual object that was changed (and the property name if possible)?
  // in this case of the above example, it will be data.graph[0]
  const o = getModifiedObject(props); // this line is hypothetical
  // o can equal to props or any of its nested objects
  processPartial(o);
});
</script>

[Shyam-Chen]

Use { deep: true }.

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // Note: `newValue` will be equal to `oldValue` here
    // *unless* state.someObject has been replaced
  },
  { deep: true }
)

[alvinsw]

Let’s say I modify the watched object state.someObject.a.b.c = 1, I just want to find a way to efficiently get the object state.someObject.a.b and the prop name (‘c’) which all only be known at runtime, inside the watch callback.