scrollbar not updating when data is added (Vue 3)

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

```

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,
};
},
});

.list {
height: 200px;
}

```