scrollbar not updating when data is added (Vue 3)

[Joebu]

I'm trying to implement infinite loading the issue is that even after the data is added I can't scroll further until I scroll up a bit then its being refreshed. here's a reproduction of the issue

I'm using "vue-virtual-scroller": "^2.0.0-alpha.1"

this is my component

<template>
  <div>
    <span>data count: {{ data.length }}</span>
    <RecycleScroller
      class="list"
      :item-size="32"
      :items="data"
      key-field="id"
      v-slot="{ item }"
      @scroll.passive="handleScroll"
    >
      {{ item }}
    </RecycleScroller>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface record {
  id: number;
  name: string;
}

function generateData(startIndex: number): Array<record> {
  const arr = Array<record>();
  for (let i = startIndex; i < startIndex + 10; i += 1) {
    arr.push({
      id: i,
      name: `${i} index`,
    });
  }
  return arr;
}

export default defineComponent({
  setup() {
    const data = ref(generateData(0));

    const handleScroll = async function ({ target }: { target: HTMLElement }) {
      const { scrollTop, scrollHeight, offsetHeight } = target;

      if (scrollTop === scrollHeight - offsetHeight) {
        data.value.push(...generateData(data.value.length - 1));
      }
    };
    return {
      data,
      handleScroll,
    };
  },
});
</script>
<style scoped>
.list {
  height: 200px;
}
</style>

[ferrykranenburgcw]

We got the same issue in Vue 3.2

[Joebu]

@ferrykranenburgcw I did the following to resolve this issue I'm calling handleResize();on the component

       const list = ref(); //refernce to RecycleScroller component 
       let lastScrollTop = 0;
       const handleScroll = function({ target }: { target: HTMLElement }) {

              const { scrollTop, scrollHeight, offsetHeight } = target;
              if (scrollTop > lastScrollTop) {
                    if (Math.ceil(scrollTop) > scrollHeight - offsetHeight - 100) {
                              loadMore().then(() => {
                                    list.value.handleResize();
                    });
                    }
                }
              lastScrollTop = scrollTop;
        };

[NO-MAP]

hey, bro. aren't you going to fix this problem?

still not working with vue@3.2.26. plz fix it, i really neeeeeeeeeeed it. thanks.