Using v-bind object syntax causes passing unwrapped Ref(ComputedRef) props to child component.

[nukash]

I encountered the following behavior of vue 3.4.21.
Could you please kindly tell me that it is designed or not.

<Reproduction URL (Vue SFC Playground)>
https://play.vuejs.org/#eNqNUk1v2zAM/SucMMAZkNjYkpPnGtiGHjZgXbGPm4DBiRnHrS0JkuylMPzfR0m1kwVtsZNJvkf6kXoD+6BU3HfIUpaZna6VBYO2U9AUorrizBrOci7qVkltYQCNexhhr2ULEbVFM/RJtuqxHicucVOj91xwsZPCWBBFi3DlBmTG6lpU+SK66e6LqojeEC2QimriiK7dos4Xm7VDJ3xbi5IIg5+29PSR4CwJ2kkpJRZb1RQWKQPInBYXAKREp5U2a84eC24KVSL9IA9YR6GehL5XqxX8ot+2LQoLB9QIq9UJOpvbr5wsmuM+04xAzpIzMWxJ56Q99nUV3xkp6OaDI3NGf1F1g/qbsjXtyVkKHnFY0TTyzxdfs7rD5VTfHXB3/0T9zhxdjbNbjQZ1j5zNmC10hTbA1z9u8EjxDLay7BpivwB+RyObzmkMtI+dKEn2Gc+r/ewtQU/801wfLQozLeWEOubo+ZyRRdwZn1v9JHcdb3wfFyNdcbLX/5r2a/GwJe2Xzp1MpbRUhlxV4r4WeOuyzGsgv6Rz8+RIsht4+6UQfEyFMV8El75kxLLuffBPSMlhnb/2ErKEwrnsOMMAAYJxzJLLruebnuo5xVN0ac7fPWr3VHRWunf87i0b/wLnglZS

1. Open the link for reproduction after opening dev-tools on browser. Clear or confirm that there is no warning.
2. Uncomment from template under the ＜!-- Uncomment here --> comment.
3. After re-rendering automatically, you can see the following warning on the console in dev-tools:

Invalid prop: type check failed for prop "name". Expected String with value "[object Object]", got Object

4. The Comp component has two props, which are 'name' and 'age'. Type of 'age' is MaybeRef<number>. But Type of 'name' is not generics of MaybeRef, is simply number.

I have tried to debug then I understand that using v-bind="bind" (object syntax) passes Ref object as props of 'name'.

If this is designed behavior, I should update type of the 'name' prop to MaybeRef and same for all of custom component.
But I feel it is redundant implementation then I wonder it is really designed.

[LinusBorg]

In the template, only top-level refs are unwrapped.

Refa newted in plain objects are not. You can make it a reactive object to get unwrapping

[nukash]

Hi @LinusBorg,

Thank you for your very quick response!

Do you mean that if the bind is a reactive object rather than plain object, vue unwraps recursively?

Certainly after I updated the bind variable as below, warning is not appears.

const bind = reactive({ age, name });

[LinusBorg]

reactive() always unwraps, yes.