Vue version

3.5.16

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ywxm1tkm?file=src%2Fcomponents%2FInfoIcons.vue

Steps to reproduce

Open the page and try to scroll FAST up and down:

What is expected?

The prop value and destructured ref should always be in sync with each other.

What is actually happening?

In certain cases some of the rows will have prop equal to false, but ref equal to true, not sure what is causing this, but it does not seem to be related to the library being used for virtual scroll. It just looks that when the component is in "keep alive" mode and then returns back to the DOM in some cases the ref value will not get updated. Prop value is always correct. I'm not 100% sure that this is the issue with Vue itself, but it pretty much looks so, since removing prop destructuring and just using "raw" prop value will always return the correct result. Like the video shows, the values gets de-synced randomly, maybe it is some kind of race condition when triggering multiple re-renders (I guess each scroll causes re-render, also the library is using requestAnimationFrame() ?

System Info

System: OS: Windows 11 10.0.26100 Browsers: Chrome: 137.0.7151.104 (Official Build) (64-bit) Edge: Chromium (135.0.3179.98) Internet Explorer: 11.0.26100.1882

Any additional comments?

No response