Deleted items do not disappear immediately

[seejwy]

Describe the bug

I am attempting to remove items from a list, but encountering an issue where the item does not disappear right away. When I try to delete an item, it remains visible, and the subsequent item appears on top of it if I scroll the deleted item slightly off the screen. Image below shows what I mean if my description was not clear.

However, if I continue to scroll down further, the list corrects itself and the item disappears as intended.

Reproduction

https://stackblitz.com/edit/vue-embdwk?file=src%2FApp.vue

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 2.47 GB / 15.68 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.11 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.200)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^4.2.3 => 4.2.3
    vite: ^4.4.6 => 4.4.9
    vue: ^3.3.4 => 3.3.4
    vue-virtual-scroller: ^2.0.0-beta.8 => 2.0.0-beta.8

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[lmjgyy]

I looked at the source code, and the watching items in the code are not deeply monitored, meaning that you can only reassign values to trigger its watch callback