Unwrapping of deep ref in Map is not correct

[bergmorten]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNVNtu2kAQ/ZWRXwxSBAm8UYjURFHVSr0oifqCeVjsMWywd1d7ASrL/95Z2zh2oUleLO/MmTNnLrtF8Fmp0d5hMAvmJtZcWTBonYKMic0iCqyJgttI8FxJbaEAjSlc0ZfFlu+xhFTLHEIiCCMRiVgKY2Et5c7AokUNlhQ1CH87hCl8cTzBcLgaRmI8BoGYwGjPMvJtUWNNITMcZXIzqIiW16saQBGnDDlTN90EAg/wnanBchnG0gkbeonp4Hq4Wg0vJwImErBbbuAg9c7083r60QbtoGEbdgR0JEzekVCkUs4aIWWr5PmPwqbTlF9Qp7it5dXq1s56Cylz4qCZUpicqZv01VGeRiFQAk3z08KHJ5hy4cO7fbv3QYvqt8fyqZ8lpGJuaklUShvYduK1C5S9ouuLukA3AYLWZD7Iy+4JFi5fowazlS5LYMv22LjgEdOvucqY5bKp5Yy3K/XE/l5TyP7EcvS9ZpmRcNiiAGe42FR7zqlCZAnItB1zt24P8QuQfnz2F1ScF+N5/y2IbHUx/xu8L2c+rveK7isdLFYdQzrNE76/vfOXaQZFcbpVZQnzsfc0gHbGHtQeLqB8exuM/+0ixm3W4IreDiou5ZvRi5GCHpgiEgBREMtc8Qz1T+XHSe8LcXmP97Esk4dvlc1qh1cne7zFeHfB/mKO3hYFvzQa1DSgoPVZpqlZtfvh6Qce6b915jJxGaHfcD4iDcZVK1fB7mhqJLuDq9TSYtLTSDvzbB6OFoU5FeWFemRZ4aOAHsn7N0p/lTsdTau4SJRB+ReTY/Dz

Steps to reproduce

Run the play ground in link and see that nested ref inside Maps are unwrapped even that documentation and Typing says it should not.

ref: documentation:
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-in-arrays-and-collections

What is expected?

Ref inside Map should not be unwrapped even when inside nested object.

What is actually happening?

const map2 = reactive(new Map([['count', {foo: ref(0)}]]))
// Typescript thinks it need value but it is unwrapped
console.log(map2.get('count').foo.value) // returns undefined

System Info

No response

Any additional comments?

No response

[OBe95]

Hello @bergmorten
I checked the code and I believe this is the expected behaviour:

1. when you access map2.get('count') the check is done on map2 which is a Map so it's marked as TargetType.COLLECTION thus its content won't be unwrapped (here is an object {foo: ref(0)})
2. then when you access .foo the check is done on map2.get('count') which is now an object, it'll be marked as TargetType.COMMON thus unwrapped (no need for .value)

In comparison to

const map = reactive(new Map([['count', ref(0)]]))
// need .value here
console.log(map.get('count').value)

Accessing map.get('count') won't unwrap the content, thus resulting in the ref(0) for which you need .value

[bergmorten]

I thought the reason for not unwrapping inside map or array was a performance decision and therefor though this was an error, If this is expected behaviour then the typing is wrong (and possible documentition). The type hint says that you need foo.value (which returns undefined when executed).

[OBe95]

I created a PR to update the typing to infer the type of the collection value (Map, Set..) and tries to recursively unwrap it, I believe that the documentation can be more clear around this detail

[sxzz]

Duplicate of #8904