Vue3のリアクティブがなぜか壊れる

props: {
  obj: { type: Object as PropType<{ value1: number; value2: number }> },
}

return {
  value1: computed(() => props.obj.value1)
}

<Child :value="value1" @update="updateValue1" />
<Child :value="value2" @update="updateValue2" />

こんな感じになって、value1の方が更新されるとvalue2がChild側でリアクティブに更新されなくなる。

<Child :value="value1" @update="updateValue1" />
<Child :value="value2" @update="updateValue2" />
{{ value2 }}

template内の他箇所でレンダリングするとChild側にもリアクティブに反映される。

<Child :value="obj.value1" @update="updateValue1" />
<Child :value="obj.value2" @update="updateValue2" />

computedを経由せず直接propsから参照して渡すとリアクティブは特に壊れない。

この辺。

spaceTypeを変更してもinfluenceは壊れない。
minやmaxを更新したときだけinfluenceが反応しなくなる。

上にあるSliderInputで値を更新すると下にあるSliderInputのリアクティブが壊れるぽい。なんでや。

computedを経由せず直接propsから参照して渡すとリアクティブは特に壊れない。

とりあえずこれが回避策でよさそう。

props由来の値をcomputedでそのまま返すと挙動が怪しくなる？
冗長な処理に違いないからそうならないよう気を付けておくのが無難か。