memory leak with input elements that have closures as event handlers

[softwareCobbler]

Vue version

3.5.12

Link to minimal reproduction

https://github.com/softwareCobbler/formkit-leak-repro/tree/just-vue3

Steps to reproduce

Build via "npm build". Run via some barebones http server, I am using python -m http.server. Click on "toggle" to mount the component in question. Type into the element (mash keyboard, or single character is fine). Note that this does not reproduce if the input element is not typed into. Then click on toggle to unmount the component. Check chrome devtools for memory consumption. See that It retains about 40mb (one "leak" object), which is still reachable after unmount, and forcing a GC does not reclaim it (because it still reachable).

I see that the retainers includes various detached elements and a reference to something named _vei, which looks similar to #5363, so maybe this is a regression. The leaked object's classname is literally Leak to make it stand out in the heap viewer.

What is expected?

After unmount, refs declared in a setup function become candidates for GC.

What is actually happening?

Objects are being retained past their expected lifetime.

System Info

chrome 129

Any additional comments?

No response

[edison1105]

duplicate of #11552

[softwareCobbler]

The referenced duplicate is closed, due to being linked to a Chrome bug, but I am able to observe this behavior on FireFox 131.0.3. I tweaked the repro a little to leak a 100MiB ArrayBuffer so it is identifiable in firefox's memory inspector. The attached image is after the component has been unmounted and GC has been forced via "about:memory". It does seem like it only leaks the "first" one, subsequent mount/unmount cycles produce objects that do get collected, though the first one remains uncollectable.