Virtual List Framework7 Vue V5

Questions
1

Hi,

I wanna ask about virtual list, I have code like this :

<f7-list
   class="search-list searchbar-found large-separator"
   inset
   media-list
   virtual-list
   :virtual-list-params="{
      items: listData,
      searchAll,
      renderExternal,
      height: height,
   }"
>
   <ul style="min-height: 50px">
       <f7-list-item
           v-for="(item, index) in vlData.items"
           :key="index"
           :title="item.name"
           :chevron-center="true"
           :style="`top: ${vlData.topPosition}px`"
           :value="item.id + '|' + item.name"
           radio
           radio-icon="start"
       />
   </ul>
</f7-list>

<script>
export default {
  data() {
    return {
       height: 30,
       listData: [{
           id: '',
           name: '',
       }],
       vlData: {
        items: [],
      },
    }
  },
  methods: {
     searchAll(query, items) {
      const found = [];
      for (let i = 0; i < items.length; i += 1) {
        if (
          items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
          query.trim() === ''
        )
          found.push(i);
      }
      return found; // return array with mathced indexes
    },
    renderExternal(vl, vlData) {
      this.vlData = vlData;
    },
  }
}
</script>

The problem is the virtual list sometimes get blank when I am scrolling the list. And when I look at the vue data, it’s turn like this:
image
image
Is there anything wrong?

Thanks.