toRef with nested object's property looses reactivity when parent object is reassigned

[junhea]

Vue Version

3.5.12

Link to minimal reproduction

playground

Steps to reproduce

the provided example has a nested reactive object : level0 = {level1:{level2:'default'}}
and each property has its own ref object created with toRef
when you reassign anything other than the leaf property,
the ref objects created with toRef looses reactivity

What is expected?

ref objects created with toRef should retain reactivity

toRef

Can also be used to create a ref for a property on a source reactive object. The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.

What is actually happening?

ref objects created with toRef looses reactivity

Any additional comments?

not sure if this is a bug,
if i'm missing something please let me know.

[Wei-Ba]

const origin = { inner: {} }
const refvalue = ref(origin) // refvalue.value === origin
const refvalue2 = toRef(origin.inner) // refvalue2.value === origin.inner

const other = { inner: {} }
refvalue.value = other // refvalue.value === other   refvalue2.value === origin.inner   origin !== other
refvalue.value.inner.a = 'a' // other.inner.a = 'a'

const a = ref({ label: '' })
const b = toRef(a.value.label) // ref(a.value.label)
b.value = 'b' // a.value.label !== b.value

const c = toRef(a.value, 'label') 
c.value = 'c' // a.value.label === c.value

const a = ref({ inner: { label: ''} })
const inner = a.inner // a.inner is a proxy, like toRef(a.value.inner)
inner.label = 'a' // a update:  a.inner.label === inner.label