Reactivity system is inconsistent (vue has 2 separate reactive systems for prop/ref)

[Hulkmaster]

Problem

I've encountered situation, which seemed like bug to me: #9732

And answer staggered me a bit, because that sounds strange to be honest, it means that vue has 2 separate, reactivity systems:

1. lets call it "ref" system, which is:
   ref/reactive - watch every property separately
   ref/shallowRef - watch assignment

2. let's call it "prop" system
   where vue does, i'm now not sure what

i went through https://vuejs.org/guide/extras/reactivity-in-depth.html yet again, but i have not found a part where it says that props work differently from refs

the only thing i found was:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.

which makes me assume: they work the same, because concept of "update" was described in "reactivity in depth" and does not differentiate between refs/props

Expectation

I would really expect ref/props to work the same way, where functions like "triggerRef" would do the same as

// we need this in order to trigger props reactivity, because props reactivity differs from ref reactivity
myObject.value = {
  ...myObject.value,
};

[LinusBorg]

They do work the same way, though. Let me explain.

Imagine a Parent component containing this:

<script setup>
const shallowState =  shallowRef({
  name: 'Tom'
})

function update() {
  // non-reactively mutate the object:
  shallowState.value.name = 'Jerry'

  // trigger the ref
  triggerRef(shallowState)
}
</script>
<template>
  <button @click="update">update</button>
  <Child :user="shallowState" >
</template>

Clicking this button will make the Parent re-render. Now. what happens if the parent re-renders?

1. It passes the content of shallowState to the child.
2. The child receives a new prop value
3. the child realizes the new value is the same as the old value
4. The child concludes it has no reason to update.

Now this is what confuses you. You expect the triggerRef call to kind of also force an update in the child. But looking closely at the way triggerRef works, this is not expected.

To understand why, imagine the props of a child component to be just another reactive object, and the re-render updating a property in that object:

const shallowState =  shallowRef({
  name: 'Tom'
})

const childProps = reactive({
  user: shallowState.value
})

function update() {
  // non-reactively mutate the object:
  shallowState.value.name = 'Jerry'

  // trigger the ref
  triggerRef(shallowState)

  // update childProps, simulating what happens during the parent's re-render
  childProps.user = shallowState.value
}

watch(() => childProps.user, (newValue) => {
  // this will never be triggered because `childProps.user` will always be the same object
  console.log(newValue)
  // likewise, the child update effect will never be triggered by such a props update from a parent.
})
</script>