Reactive Props Destructure bug

[folks-samuel-cb]

Vue version

3.5.15

Link to minimal reproduction

https://play.vuejs.org/#eNqlVFtv0zAY/SvGL0lRSTWNvXTt0ECTACGYBhIPGKE0+dJ6OHbwpWtV5b/z2bk0GaMve2gV+7udc3zsA72uqmTrgM7pwmSaV5YYsK66YpKXldKWHIiGYpqpsnIWclKTQquSRFgT9TnZhov8rI0ks2bp20aXTDKZKWks4eYO/jiuscnS94yLVBiYYEYTF+kKxLtuzpJ0I+N4srwi8bE82abCwYS8icp9U0VeRmRO+mU06XqWZt0Oi96DEIp8V1rkL3zCYtbwRaa4sFBWIrWAK0IWXOJkYvcVLBnNNpD9Xqkdo2T7qlQ5CNw8omG0qWk1mAcEmDGig7UzTFvMBnPolFqDMAu+Tu6NkngEB98JJ2IVF6C/VJYjDUbnJER8LEUWDx/DntUOpt1+QPnE/r1B4HP8uNVgQG+B0T5mU70G24Rvvn6GHX73QWTqBGafCN6BUcJ5jE3aWydzhD3IC2g/BJNwuf5mbnYWpOlIeaA+sw75jKJhvGD/o36Ee568DnVM1qji0W4nXPyQ2mxzUxSQ2WlvraGZ0YdtrjNwLfd2g4h7Sw/2fGbjrkM44xodlkPBJdxqVZn4R9SY8Ke3NpODwehkglYOhHwHJSARah2jnVCUHAga2ENTEmR7H/DWoH3TzPJwcs2mb1z3Hu/IfAr5o3vjp/UVAwpx2DzqEEobuCeuxaHli7I/NvKgd2INHkP/eAzoj96OS6ZxAv5gFzJRwdQJSwonkaySw1N4Gi7qiOVkOKEXOATGIkePNDbpSsC/IkdHjUOTuvt43pzxIY3njWLt4zaeXvs/lPnXFrS/PSjweXKRnF3Q+i8gTfvU

Steps to reproduce

everything is simple and in the demo.

You first created a computed value in a component pass it down to a child in props. Deconstruct props and its still reactive. Pass it to a composable and it lose its reactivity. Case shown with a new computed and the prop directly

What is expected?

The goal of a composable is to keep reactivity and do reuasable logics so its mean it should work as intented i think

What is actually happening?

prop lose reactivity in composable

System Info

Any additional comments?

No response

[skirtles-code]

This appears to be working correctly. Inside the composable, label is just a string.

To pass a destructured prop to a composable while retaining reactivity you need to wrap it in a function or a ref (using toRef or computed). The composable would then use toValue when it needs to unwrap it.

See https://vuejs.org/guide/components/props.html#passing-destructured-props-into-functions for more details.

[Justineo]

Closing as explained above by @skirtles-code.