Creé este ejemplo mínimo para mostrar lo que no entiendo sobre el motor de reactividad de Vue.
<script setup> import { ref, computed } from 'vue' const obj = ref({ some: { value: 1, nested: { prop: 1 } } }) const dep1Changed = ref(0) const dep2Changed = ref(0) const dep1 = computed(() => { console.log('dep1') dep1Changed.value++ return obj.value.some.nested.prop + 1 }) const dep2 = computed(() => { console.log('dep2') dep2Changed.value++ let lvl = obj.value // IT ACCESSES .some, BUT THE REACTIVITY ENGINE DOESN'T CARE! lvl = lvl.some // Rightfully so, BUT WHY? And how does it do it!? lvl = lvl.nested lvl = lvl.prop return lvl + 1 }) </script> <template> <p>dep1 changed: {{ dep1Changed }}</p> <p>dep2 changed: {{ dep2Changed }}</p> <h1>{{ dep1 }}</h1> <h1>{{ dep2 }}</h1> <h1>{{ obj.some.value }}</h1> <button @click="obj.some.nested.prop++">incr</button> <button @click="obj.some.value++">incr some.value</button> </template> En resumen, hay un objeto reactivo profundamente anidado obj y valores computed dep1 y dep2 , que acceden a obj.value.some.nested.prop cada uno de una manera ligeramente diferente (ver la implementación). Y cada vez que estos valores computed se recalculan, incrementan dep1Changed y dep2Changed respectivamente (sé que los efectos secundarios en el computed son un antipatrón, pero tengan paciencia conmigo).
Cada vez que incrementamos el valor de some.nested.prop , tanto dep1 como dep2 recalculan correctamente para crear un nuevo valor almacenado en caché. Traté de engañar al motor de reactividad para que recalculara dep2 introduciendo some.value , que se incrementa con otro botón. Parece que Vue debería pensar que dep2 depende de some niveles nested y prop del objeto, ya que se accede a ellos por separado. Esto significaría que siempre que cambie dep2 some.value debería recalcularse. ¡Pero no es así! ¡ Sabe que solo depende del prop de alguna manera !
Y no me malinterpreten, no es algo malo en absoluto, es algo increíblemente bueno , pero está hecho de manera tan inteligente e inteligente que no puedo entender cómo se logró.