useVirtualList is not updated immediately

[Lazydd]

Describe the bug

Now scroll the scroll bar to the bottom, and then click the button. The newly added data does not appear. You need to scroll the scroll bar online and then scroll down before it appears.

Reproduction

https://stackblitz.com/edit/vitejs-vite-unw2xw?file=src%2FApp.vue,package.json

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700F
    Memory: 2.03 GB / 15.79 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.11.0 - ~\node_modules\.bin\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vueuse/components: ^10.9.0 => 10.9.0
    @vueuse/core: ^10.9.0 => 10.9.0
    vue: ^3.4.21 => 3.4.21

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[STY1997]

I got the same issue, no idea how to fix this.

[STY1997]

I solved this issue by using shallow copy instead of list.push, like: const myList = [...myList.value, newItem].
I am not sure why push may lose the reactivity in this scenario...
Not sure this would work for you, but this does work for me.

[crabcode]

It's been a while, but I believe you're able to call "containerProps.onScroll();" after any changes made and it will update. Too bad it needs this workaround though.

[windlil]

Maybe you can try this and use reactive to make the array change responsive.

const allItems = reactive(Array.from(Array(99).keys()));
const filteredList = computed(() => {
  return allItems
});