Dep leak for property keys

[skirtles-code]

Vue version

3.5.6

Link to minimal reproduction

https://play.vuejs.org/#eNp9UslqwzAQ/ZVBlzoQHEqXQ3FLF3JoC2lpQk+C4irjxLEsGS1OivG/dySTNIeSm/SWmTcjdeyhadLWI7thmRWmbBxYdL6546qsG20cdGAwF65scUynAnoojK7hjExnXHElZG4tfC5MLiro+ghpZakO3B6sicItzNElo9GeriJdJARwVXhFOq2AdK/4k4yg4wqgSttceiRl8A89goG6ZJMhLgWli8O6kblDugFk6/O7rgObrnObVCPo+2xCUKS+vXPU5l7IUlS3nA39OIsswAy3UTYZdIRmk6PabMycpfhFuUo3VivaWszJmdB1U0o0b00Yw3J2M0wQuFxKvX2JmDMex3tcrFFU/+AbuwsYZ+8GLZoWOTtwLjcrdAM9nc9wR+cDWeull6Q+QX6g1dKHjIPs0aslxT7SxbTP8e1LtVrY6c6hsvuhQtCg7KOeM/oFTydG/4t7kV5GHz0ebfGrRRNq0gIv0qv0mvW/8H3XZg==

Steps to reproduce

1. Click the New button a few times.
2. Take a Heap Snapshot.
3. Filter on the class VTrack.

What is expected?

There should be only one instance of VTrack.

What is actually happening?

There is one instance per button click.

System Info

No response

Any additional comments?

• You can also filter for the Dep class, as instances of that also leak.
• This is reproducible from 3.5.0 to 3.5.6.
• It is not reproducible in 3.4, but it is reproducible in 3.3. I believe it is essentially the same underlying problem as fix(reactivity): fix dep memory leak #7827, which was fixed in 3.4.
• I've also tested in a Vite project with a production build. Testing in production is a little trickier as the classes are renamed, but they can be identified via a snapshot comparison.

The Set isn't required to reproduce the problem, it just makes it much easier to see. This example uses a normal object:

• Playground

In this case there is no VTrack, so you need to filter for Dep to see the problem. A new Dep gets created for each button click, but they never get tidied up. The Set case is much worse as set.has(key) also leaks key, which could potentially be a large object.