useVirtualList with Vue2 - list is not reactive

Describe the bug

I’m using Vue2 and useVirtualList does not render anything. list stays empty.

Ref #1078 (#951 Vue3)

Reproduction

https://stackblitz.com/edit/vitejs-vite-uuio2f

System Info

Stackblitz template; 


{
  "name": "vite-starter",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "postinstall": "vue-demi-fix"
  },
  "dependencies": {
    "@vue/composition-api": "^1.4.9",
    "@vueuse/components": "^7.7.1",
    "@vueuse/core": "^7.7.1",
    "vue": "^2.6.14",
    "vue-demi": "^0.12.1"
  },
  "devDependencies": {
    "vite": "^2.8.6",
    "vite-plugin-vue2": "^1.9.3",
    "vue-template-compiler": "^2.6.14"
  }
}

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.

[johanneslo1]

I had to add the scroll event manually too. I’m using Vue 2.7.2.

In <script setup>:

const { list, containerProps, wrapperProps } = useVirtualList(filteredList, {
  itemHeight: 22,
});

const containerRef = containerProps.ref;

In <template>

<div
      ref="containerRef"
      style="height: 300px; overflow-y: auto;"
      @scroll="containerProps.onScroll"
    >
      <div v-bind="wrapperProps">
        <div v-for="item in list" :key="item.index" style="height: 22px">
          Row: {{ item.data }}
        </div>
      </div>
    </div>

[johannes-z]

not completed