Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqlUk1v00AQ/SvLXuqoiQ3qLTgRCeqBHtqKInHxZWuP023t3dV+mFSWr9y4IQ4gfgaIA+LXRAj+BbPrOOmh5dIcIs+8N+P3xq+lC6XixgGd0tTkmitLDFin5pngtZLakpbkslbOQjEmGsqxE/hPOlJqWZMDHD3YUV8icduPE1/4zQhnIpfCWMIYmfkd0dORb5ZO5JZLQfKK5zdLZ60Ui2jUZoIgNW5Y5eDw8Hkmuv2KZslFgVu2pPEWTJNePMrGwkKtKmYBqzRoaiaXODbLaBjPaIIIIemTyWRgTBlDmLEBm0z6VQVv5ullkEZeBJ1Iu6s3o2Qe6kWa9Lx5mvgpL2onhI6pNeig5Kv42kiB5w4OcBe+nVegz5Q/hcnotPfmMVZV8t1J6FntAM32/fwK8pt7+tdm7XsZPddgQDeQ0R1mmV6B7eHji1NY4/MOrGXhKmT/B3wNRlbOa+xpSycKlH2HF9S+CkngYvXGHK8tCDOY8kI9swt8/BIO/OEfsr6XexQfhTn80njFIVWPy+uQJqWlMpimAkou4NxXUcsY6rC3CqYEPQak6LqQ2H5q2P+W26swgxuGXhSNyGzufXiurCCu5Cp6hr9x/7aYMVzlTWrUrQU5uTg7jY3VeDNe3kaBNCJJQjY/Pmx+fv798fvfL+83v77++fYJTxBkPJx2H7x2f4G9wq67L5XdP1a4ZOo=

Steps to reproduce

like the reproduction Link demo, the ref aa in App.vue changed, but the computedWithProps in Comp.vue not be trigger

What is expected?

the computedWithProps in Comp.vue be trigger

What is actually happening?

the computedWithProps in Comp.vue not be trigger

System Info

No response

Any additional comments?

No response

maybe u should use reactive to v-bind

https://play.vuejs.org/#eNqVUk1v00AQ/SvLXuqoiQ3qLTgRCeqBHtqKInHxZWuP023t3dV+mFSWr9y4IQ4gfgaIA+LXRAj+BbPrOqlQoWoOkXfem7dvZl9LF0rFjQM6panJNVeWGLBOzTPBayW1JS3JZa2chWJMNJRjJ/y/BpZb3gDpSKllTfZQY2/b8xw7bupx4g/+CoQzkUthLGGMzLxY9Hjki6UTKCYFySueXy2dtVIsolGbCYLUuGGVg/39p5nodhLNkosiqPRGohv2GFlBNE36eXASPFioVcUs4CkN7prJOQrMMhqEMpogQkj6aDIZGFPGEGZswCaTXqrgzTw9DybJs+AYabedZ5TMw3mRJj1vnia+y5vaGqFjag3OUvJVfGmkwBcII6AW3s4r0CfKL8VkdEoC4jFWVfLNUahZ7QCn7ev5BeRXd9QvzdrXMnqqwYBuIKNbzDK9AtvDh2fHsMbvLVjLwlXI/g/4EoysnPfY05ZOFGj7Fi+4fREywcXqlTlcWxBmGMob9cwu8PElHPjF/2v0nd2D+CD04VPjFod8PTDCfyV3yJXSUhnMVQElF3DqT1HLGPqw1wqmBGcMSNH1Meu7Bv3X3F6EHlQYalE0IrO5n8NzZQVxJVfRE/yN+9tixlDKD6nRtxbk6OzkODZW4854eR0F0ogkCdl8e7f5/vHn+6+/P73d/Pj868uH+9Pug9fuNrBz2HV3pbL7Aw2GbA0=

maybe u should use reactive to v-bind

https://play.vuejs.org/#eNqVUk1v00AQ/SvLXuqoiQ3qLTgRCeqBHtqKInHxZWuP023t3dV+mFSWr9y4IQ4gfgaIA+LXRAj+BbPrOqlQoWoOkXfem7dvZl9LF0rFjQM6panJNVeWGLBOzTPBayW1JS3JZa2chWJMNJRjJ/y/BpZb3gDpSKllTfZQY2/b8xw7bupx4g/+CoQzkUthLGGMzLxY9Hjki6UTKCYFySueXy2dtVIsolGbCYLUuGGVg/39p5nodhLNkosiqPRGohv2GFlBNE36eXASPFioVcUs4CkN7prJOQrMMhqEMpogQkj6aDIZGFPGEGZswCaTXqrgzTw9DybJs+AYabedZ5TMw3mRJj1vnia+y5vaGqFjag3OUvJVfGmkwBcII6AW3s4r0CfKL8VkdEoC4jFWVfLNUahZ7QCn7ev5BeRXd9QvzdrXMnqqwYBuIKNbzDK9AtvDh2fHsMbvLVjLwlXI/g/4EoysnPfY05ZOFGj7Fi+4fREywcXqlTlcWxBmGMob9cwu8PElHPjF/2v0nd2D+CD04VPjFod8PTDCfyV3yJXSUhnMVQElF3DqT1HLGPqw1wqmBGcMSNH1Meu7Bv3X3F6EHlQYalE0IrO5n8NzZQVxJVfRE/yN+9tixlDKD6nRtxbk6OzkODZW4854eR0F0ogkCdl8e7f5/vHn+6+/P73d/Pj868uH+9Pug9fuNrBz2HV3pbL7Aw2GbA0=

the value changed trigger aa, aa changed trigger props,
so maybe i think v-bind the plain Object would be work,

but why need reactive to wrapper the v-bind object,

const vBind = {
  aa,
}

vBind isnt a reactive param

const vBind = {
  aa,
}

vBind isnt a reactive param

https://play.vuejs.org/#eNqlU01v00AQ/SuLL3XUxFbVW3AiEtQDPbQVReLiy9Yep9vau6v9MKksX7lxQxxA/AwQB8SviRD8C2Z346SHlktziDLz3ozfG7900ULKpLUQTaNMF4pJQzQYK+c5Z40UypCOFKKR1kA5JgqqseX4TXpSKdGQAxw92FFfInHbT1JXuM0I57wQXBtCKZm5HXGXc0LolBzlvB85vLK8MExwUtSsuF1aYwRfxKPAo0lLawsJPTx8jgP7fe2S8RJXbmnjLZilwQl6wMJAI2tqAKvMC2wnVzg2yyM/nkcpIoRkzyaTgTGlFGFKB2wyCatK1s6zKy+OvPBKkXZfcR6Rua8XWRp48yx1U07UTkg0joxGBxVbJTdacLy9d4C78OmsBnUu3TF0Hk2DN4fRuhbvTn3PKAtoNvSLayhuH+jf6LXr5dGFAg2qhTzaYYaqFZgAn1yewRp/78BGlLZG9n/A16BFbZ3GQFtaXqLsezyv9pWPBeOrN/pkbYDrwZQT6pi95+ObsOAO/5j1vdzj5NjP4ZvGKw4Re1p4hzRJJaTGNJVQMQ4Xroo7iintzJ2EKUGPHin7kNkwNex/y8y1n8ENQy+OR2Q2dz4cV9SQ1GIVH+FnHJ6WUIqrnEmFuhUnp5fnZ4k2Cm/GqrvYk0YkTcnmx4fNz8+/P37/++X95tfXP98+DX+dx9PugtftL7BX2PcPpbL/BxAiaQE= but why this is work? without reactive wrapper

Can u give me more detailed explanation of this? I just want to know how it work.

The ref is set on a plain object. so it's not being unwrapped. You are not passing the ref's value to the child, you pass the ref itself to the child. so props.aa is not the changed value of the ref, it is the ref object, and that does not change (oinly its .value does, which you don't access in the computed)

if you actually use props.aa.value, it works:

https://play.vuejs.org/#eNqlUk1v00AQ/SvLXuqoiQ3qLTgRCeqBHtqKInHxZWuP023t3dV+mFSWr9y4IQ4gfgaIA+LXRAj+BbPrOOmh5dIcIs+8N+P3xq+lC6XixgGd0tTkmitLDFin5pngtZLakpbkslbOQjEmGsqxE/hPOlJqWZMDHD3YUV8icduPE1/4zQhnIpfCWMIYmfkd0dORb5ZO5JZLQfKK5zdLZ60Ui2jUZoIgNW5Y5eDw8Hkmuv2KZslFgVu2pPEWTJNePMrGwkKtKmYBqzRoaiaXODbLaBjPaIIIIemTyWRgTBlDmLEBm0z6VQVv5ullkEZeBJ1Iu6s3o2Qe6kWa9Lx5mvgpL2onhI6pNeig5Kv42kiB5w4OcBe+nVegz5Q/hcnotPfmMVZV8t1J6FntAM32/fwK8pt7+tdm7XsZPddgQDeQ0R1mmV6B7eHji1NY4/MOrGXhKmT/B3wNRlbOa+xpSycKlH2HF9S+CkngYvXGHK8tCDOY8kI9swt8/BIO/OEfsr6XexQfhTn80njFIVWPy+uQJqWlMpimAkou4NxXUcsY6rC3CqYEPQak6LqQ2H5q2P+W26swgxuGXhSNyGzufXiurCCu5Cp6hr9x/7Z4SDYu9FY1qteCnFycncbGarwcL2+jQB2RJCGbHx82Pz///vj975f3m19f/3z7hIcIYh7OvI9fu7/DXmfX3ZfN7h+nqGc1

now, if you wrap your plain object in reactive(), the nested ref will be unwrapped, so now v-bind passed the value to the child Comp.

but why this is work? without reactive wrapper

This works because now your aa ref's value returns a reactive object, and JSON.stringify iterates over this object in the child, thereby accessing props.aa.1 during that iteration, registering it as a dep.

The ref is set on a plain object. so it's not being unwrapped. You are not passing the ref's value to the child, you pass the ref itself to the child. so props.aa is not the changed value of the ref, it is the ref object, and that does not change (oinly its .value does, which you don't access in the computed)

if you actually use props.aa.value, it works:

https://play.vuejs.org/#eNqlUk1v00AQ/SvLXuqoiQ3qLTgRCeqBHtqKInHxZWuP023t3dV+mFSWr9y4IQ4gfgaIA+LXRAj+BbPrOOmh5dIcIs+8N+P3xq+lC6XixgGd0tTkmitLDFin5pngtZLakpbkslbOQjEmGsqxE/hPOlJqWZMDHD3YUV8icduPE1/4zQhnIpfCWMIYmfkd0dORb5ZO5JZLQfKK5zdLZ60Ui2jUZoIgNW5Y5eDw8Hkmuv2KZslFgVu2pPEWTJNePMrGwkKtKmYBqzRoaiaXODbLaBjPaIIIIemTyWRgTBlDmLEBm0z6VQVv5ullkEZeBJ1Iu6s3o2Qe6kWa9Lx5mvgpL2onhI6pNeig5Kv42kiB5w4OcBe+nVegz5Q/hcnotPfmMVZV8t1J6FntAM32/fwK8pt7+tdm7XsZPddgQDeQ0R1mmV6B7eHji1NY4/MOrGXhKmT/B3wNRlbOa+xpSycKlH2HF9S+CkngYvXGHK8tCDOY8kI9swt8/BIO/OEfsr6XexQfhTn80njFIVWPy+uQJqWlMpimAkou4NxXUcsY6rC3CqYEPQak6LqQ2H5q2P+W26swgxuGXhSNyGzufXiurCCu5Cp6hr9x/7Z4SDYu9FY1qteCnFycncbGarwcL2+jQB2RJCGbHx82Pz///vj975f3m19f/3z7hIcIYh7OvI9fu7/DXmfX3ZfN7h+nqGc1

now, if you wrap your plain object in reactive(), the nested ref will be unwrapped, so now v-bind passed the value to the child Comp.

but why this is work? without reactive wrapper

This works because now your aa ref's value returns a reactive object, and JSON.stringify iterates over this object in the child, thereby accessing props.aa.1 during that iteration, registering it as a dep.

use props.aa.value can registering it as a dep, but why JSON.stringify(props) not, as you said, JSON.stringify can iterates over this object in the child, so JSON.stringify will iterates over props.aa too, that means props.aa.value will be accessing by JSON.stringify, but why not registering it as a dep?

https://play.vuejs.org/#eNqlk7+O00AQxl9l2eYcXWKDrgtORIKugAJOgESzzZ49ye2ds7vaPybIcktHhyhAPAaIAvE0EYK3YHYdO4d0R3MpIu9838z+Zjxu6ELrtPZApzS3hRHaEQvO6zmTYqOVcaQhhdpo76AcEwOrsZf4T1qyMmpDjjD1aLA+RuM+nmbhECqjzGShpHWEczILNZL7oxBceVk4oSQpKlFcLb1zSi6SUcMkQWta88rD8fFDJttDiXopZIlV9qbxXsyzDh6x8eBgoyvuAE95ZKon55g2YzSmM5qhQkh+bzLpHVPOUea81yaTrlQp6nl+HtHIo8iJtuu8jJJ5PC/yrPPN8yxkBagBhI6ps9jBSqzTS6skjjt2gLXwdlGBea7DKCyj0663oPGqUm+expgzHrDZLl5cQHF1Q/zSbkOM0TMDFkwNjA6a42YNrpNPXz6DLT4P4kaVvkL3f8QXYFXlA2NnW3pZIvY1X6R9EjdByPUre7p1IG3fVAANzjb68U14CIO/rfUD7kl6EvPwTeMU+626277226SN0ha3qYSVkHAWTknDOXK4txqmBHuMStm2cWO7rLC3C8xKkHFEZvNAzfAW540kGEv75f1nc3uq18JdxJuwQh9Lkr5O6D7LUJA4bkgrtU4e4G/coQ6VkSY493dGoCQ6RiF79/397senXx++/fn8bvfzy++vH5EkNnD7dxJWtjnM7kDZtjftc/sX/UZ37w==

And this is also work, so what the different between funcA and JSON.stringify, or vue did some things diffenrent for JSON.stringify?

the function accesses the ref's .value getter. JSON.stringify does not, as you can see from the printed JSON object - it only prints the ref's internal ._value property, but skips the .value getter which tracks the reactive read.