Vue3使用vue3-virtual-scroll-list实现虚拟滚动处理大量选项时出现「Invalid vnode type when creating vnode」警告的问题求助

大家好，我最近在Vue3项目里尝试用vue3-virtual-scroll-list组件来处理50000条位置数据的滚动渲染，目的是通过虚拟滚动只加载视口中可见的项来提升页面性能，但现在遇到了一个警告：Invalid vnode type when creating vnode，想请教下社区的朋友们怎么解决这个问题。

先和大家说下我的实现思路：

• 虚拟列表组件virtual-list通过keeps属性控制每次渲染20条可见项
• 页面顶部做了一个搜索框，绑定searchQuery后，每次输入时调用filterLocations方法，动态筛选匹配的位置数据存入filteredLocations，作为虚拟列表的数据源
• 定义了一个简单的LocationItem组件，用来渲染每条位置数据的名称

以下是我的完整代码：

<template>
  <div>
    <input
      v-model="searchQuery"
      @input="filterLocations"
      placeholder="Search locations"
      class="search-input"
    />
    <virtual-list
      :data-key="'id'"
      :data-sources="filteredLocations"
      :data-component="LocationItem"
      :keeps="20"
      tag="div"
      class="virtual-list"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import VirtualList from "vue3-virtual-scroll-list";

const LocationItem = defineComponent({
  props: {
    data: {
      type: Object, 
      required: true, 
    },
  },
  template: `<div class="list-item">{{ data.name }}</div>`,
});

export default {
  components: { VirtualList },
  data() {
    return {
      locations: Array.from({ length: 50000 }, (_, i) => ({
        id: i + 1,
        name: `Location ${i + 1}`,
      })),
      filteredLocations: [],
      searchQuery: "",
    };
  },
  mounted() {
    this.filteredLocations = this.locations;
  },
  methods: {
    filterLocations() {
      const query = this.searchQuery.toLowerCase();
      this.filteredLocations = this.locations.filter(location =>
        location.name.toLowerCase().includes(query)
      );
    },
  },
};
</script>

<style>
</style>

目前搜索和滚动的功能好像都能正常工作，但控制台一直弹出Invalid vnode type when creating vnode这个警告，我检查了几遍代码也没找到问题所在，有没有朋友遇到过类似的情况，或者能帮我排查下哪里出错了？

备注：内容来源于stack exchange，提问作者florp