Combining shallowReadonly and ref results in incorrect TypeScript types.

[trrk]

Vue version

3.5.24

Link to minimal reproduction

https://play.vuejs.org/#eNqlVM1u2kAQfpWpLzZSZNKQ9EAcS2mVQ3toKxr1EqfVBo/Bqb272l0TEOLdO7uLjUMRtCoXvPP7zTc/6+BWynjRYDAOEj1VpTSg0TQSKsZnN1lgdBakGS9rKZSBNSgszkDPWVWJlwmyXPBqBRsolKghpDhhZ2tWEslhgsWePuNONREvGm7gVim2SiaUU/F7kidWKQqYKmQGyShNrzM+FVwbUN6FMCTWO40eHgekBGgNOieyigZwk0Jk1Xt4nQwgWvt/gEKo+jurGhzb2FEWsKdpjlkwOPMWG/8xsMkyblHEC2sOmplSFyVqVw1ph0MfkX4/3MuWBKHlbctVIcQYtFEln133pR2CVrd5eAwhFxSbC2qKy7QCM0fApcSpwdxTHNrUYbzN/R/5Qih9LqZ1OePsqUIwok2y9UzWryP2AlGnEy+mCXH/KUVNO2genAZqrlRCojIrCDv/EJhCKKmRtaRaKfnOry3LRz2B8w8QYWx09Hb07nxgu+cHheV5f0rcJOz6GstGz6NumCLXeIBec9sOO+GtmjU1cmMrO8DWSYIO1yOZYjUaVLuwr9p6oIHE2BblPzPdVeeZPkTjMdq3nbFMX4wur4jpjdsVz3O0vzgP549v4g5Qf426vHbr9wk/uFvtUPzVqpyajmTojyCdPHoYrGVFM0CvZNh7BGd0F2mQinIWP2vB6Xi6CcoCy2lZofoiTUmDlgVjP1tW527QJyczqsHtbSGfOU5/HZA/66WVZcFXhRrVgg5SpzNMzdB49d23z7ik705Zi7ypyPqIcoJaVI3F6M3eNzwn2D07h/ajO+VE072+Wxrkui3KArWWG2efBXTZPxwpfQd3FF86PxoQYvHnApWNSQSO4qv44jLY/AbSjy+a

Steps to reproduce

1. Open repro
2. You can see that three TypeScript type errors have occurred

What is expected?

TypeScript type errors do not occur. The type in TypeScript matches the runtime type.

What is actually happening?

The type of Ref in the typescript is incorrect. type errors occurs.

System Info

Any additional comments?

No response

[edison1105]

ref will be deeply unwrapped. should use shallowRef instead.
see playground

[trrk]

Thanks for the comment.

I understand that using shallowRef for rows would stop unwrapping at the outer ref level. However, I want rows to remain a normal reactive ref of an array. And in this case, I believe the behavior is incorrect, because the issue is caused by a mismatch between runtime behavior and TypeScript types.

I rely on shallowReadonly on each row object to act as the boundary and prevent unwrapping of the inner formValue ref. In the playground below, the runtime behavior is correct: formValue is still a ref. But TypeScript infers it as a string, which causes the type errors. This mismatch occurs only with shallowReadonly (not with shallowReactive or markRaw).

For this reason, I believe this is a typing issue in shallowReadonly, rather than intended behavior.

Please check the difference between the runtime behavior shown in the playground and the types inferred by TypeScript. This issue is specifically about the TypeScript typings not matching the actual runtime behavior.

Could you please consider reopening this issue?

playground