How do you manually trigger reactivity updates on complex mutable structures using triggerRef()?
❓ Interview Prompt: Explain shallowRef() mutation tracking limitations, triggerRef() manual dependency notification, and performance optimization.
When optimizing performance using 'shallowRef(heavyObject)', Vue only tracks reactivity when the '.value' reference itself is reassigned.
The Problem:
Mutating a nested property inside the shallow object ('heavyObject.value.nestedProperty = 42') will NOT trigger a UI re-render because the '.value' object reference did not change.
Solution - 'triggerRef()':
Call 'triggerRef(heavyObject)' to manually notify all subscribers watching the shallow ref, forcing a Virtual DOM re-render without converting the object into a deep Proxy!
Code Implementation Example
import { shallowRef, triggerRef } from 'vue';
const heavyMap = shallowRef(new Map());
function updateMapItem(key, val) {
// Mutate internal Map directly (does NOT trigger ref update automatically)
heavyMap.value.set(key, val);
// Manually notify Vue to trigger UI re-render!
triggerRef(heavyMap);
}Call triggerRef(shallowRef) to manually trigger reactive UI updates when mutating nested properties inside shallow refs.