Vue3：深度嵌套的响应式对象属性无法被监听或计算

问题根源 #

你直接把 state.value.myComp[0].isSelected 作为 watch 的监听目标，这会导致watch只获取该属性的初始值，无法追踪后续的深层变化。同时你的computed写法没有返回值，也会干扰依赖追踪的正常触发。

修复方案 #

1. 正确配置watch监听深层属性

使用 getter 函数返回目标属性，让Vue能够追踪依赖变化：

watch(
  () => state.value.myComp[0].isSelected,
  (oldVal, newVal) => {
    console.log(newVal);
  }
);

如果需要监听整个state的所有深层变化，可以开启deep选项：

watch(
  state,
  (newState) => {
    console.log(newState.myComp[0].isSelected);
  },
  { deep: true }
);

2. 修复computed的写法

computed需要返回一个值才能正确建立依赖关系，修改为：

const misc = computed(() => {
  const selectedStatus = state.value.myComp[0].isSelected;
  console.log(selectedStatus);
  return selectedStatus;
});

额外说明 #

UI能正常更新是因为模板会自动递归追踪响应式对象的深层属性，但watch和computed需要显式通过 getter 函数或deep选项来声明深层依赖，否则无法感知到嵌套属性的变化。

内容的提问来源于stack exchange，提问作者BAR