Vue3中不应直接修改computed属性，合规替代方案及风格疑问

对computed不可变规则的疑问 #

Vue 3中的computed(() => ...)属性不具备深度响应式特性，官方明确提到“computed属性被视为不可变，绝不能直接修改”。但Vue本身推崇“隐式魔法响应式”的理念，这条规则的合理性到底何在？

类似的props不可变规则困惑 #

我当前的项目需要可视化一个复杂的递归数据结构，其类型定义大致如下：

interface Datastructure {
  name: string;
  key: string;
  selected: boolean;
  value: number | undefined;
  properties: {
    name: string;
    value: number | undefined;
    selected: boolean
  }[];
  nested: Datastructure[];
}

项目的组件结构是递归嵌套的：

DataElement.vue // 可视化并编辑name和selected
  |- Property.vue // 可视化并编辑属性值
  |- Property.vue
  |- ...
  |-DataList.vue // 进入下一层嵌套元素，重复上述结构
      |- DataElement.vue
      |   |- ...
      |- DataElement.vue
      |- ...

如果严格遵循纯不可变的规范来实现，要么需要在组件树中大量向上触发事件，要么得构建复杂的数据存储结构，操作起来十分繁琐。因此我选择将顶层Datastructure用reactive包裹，逐层传递给子组件并直接修改，这种方式用起来十分便捷。

关于computed嵌套reactive写法的疑问 #

此外，我还需要根据其他数据进行筛选操作，目前的写法如下：

const withOnlyShownChildDataElements = computed(
  () => reactive(
    removeNonSelectedChildren(props.dataElement, someReactiveSelectorThing)
  )
);

之后我会用这个计算属性来创建子组件。我有Angular和RxJS的使用经验，能意识到这种写法不够优雅，但它运行效果极佳。我想知道自己是否忽略了什么，在reactive的使用场景中，为何这种写法会被视为不良风格？

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