I'm trying to use vue-virtual-scroll-list component on my app for implementing virtual scroll. However, it's not working as expected. It only showing some data's instead of showing all data with a minimal DOM.

Here is my code:

<virtual-list
      v-show="!!tempItems.length"
      ref="vsl"
      :data-key="'id'"
      :data-sources="tempItems"
      :data-component="childComponent"
      :estimate-size="100"
    />

the child component

<template>
  <div>{{ index }} -> {{ source.message }}</div>
</template>

this only showing the first 30 items.

Codesandbox: https://codesandbox.io/s/practical-cloud-57119?file=/src/App.vue

vue-virtual-scroll-list: https://github.com/tangbc/vue-virtual-scroll-list