If you pass a reactive variable to toRaw() within computed, computed will not be re-evaluated even if the reactive variable changes.

[hyoilll]

Vue version

5.8.3

Link to minimal reproduction

https://play.vuejs.org/#eNqVUsFq3DAQ/ZVBl8iweEnSQgnepWnJoT20JQm9VKW49uxWiS0JabS7wfjfO7LqTQIlkIOxZua9p5mnGcSlc+UuorgQVWi8dgQBKbq1Mrp31hMM4HGzALLX9X4Bje1dJGxhhI23PZww90QZZRprAgH17gYJVokjDe6BI/njZ1HMgJl/OwPnhJQFrNYwKANMpuhNvlJmyXJXdxGL/AuyKPvaSZ0YuijJXnpfP0i+ZeSvWuZJeAYOCHvX1YQcAVS/I5Fl6QeHKyVypAS8bzrd3HPm321128rTQok1H+C0WmbgqyXOZomz5xKt3q3ZoQsYhowex2qZksfqbEuCPPfsEVotn8wmFoICe7zR2/IuWMMPOnmpRKLrDv1XR5rfQAnWTJVUq7vO7j9POfIRF3O++YPN/X/yd+GQckp88xjQ71CJY41qv0XK5aubL3jg87HY2zZ2jH6heI3BdjH1mGEfomm57Se4qdtP01pqs70NVwdCE+ahUqMJOU54JXgzP74w+mO75+Wbicfbwy7+ovAdfVJlC9+W78pzMf4FkkIP3g==

Steps to reproduce

Click on the SFC Playground link.

1. Click on the add 1 button.
2. Click on the add 2 button.

As a result, computed is not re-evaluated after executing 1. or after executing 2.

What is expected?

Since the reactive variable in computed has changed, we expect computed to be re-evaluated accordingly.

What is actually happening?

Why is it that when a reactive variable in computed is passed to toRaw() as a parameter, computed is not re-evaluated even if the reactive variable changes?

System Info

Any additional comments?

No response

[skirtles-code]

This appears to be working correctly.

toRaw is used to bypass the reactivity system. If you choose to bypass the reactivity system then reactive dependants, such as computed, may not trigger when things change.

The computed will have tmpSet.value as a dependency, so reassigning that property would still trigger re-evaluation of the computed. But using toRaw removes the reactive proxy from the Set, so the computed will not have a dependency on the contents of the Set. It can't tell that you're making the .values() call on the Set because you've removed the proxy. Vue can only track interactions with objects when they go through the proxy.

The reactive proxy needs to be present for both reading values and writing changes. In your example the proxy is only present for writing changes, it isn't present for reading values, so Vue is unaware that those values have been read.