为什么 VueUse useInfiniteScroll 可组合在 Vue3 应用程序中工作，而不是 Nuxt3？

Question

有人能告诉我为什么当用户滚动到视口底部时页面不会加载更多数据吗？在 Nuxt3 里好像不行，但是在 Vue 3 里就可以了。为什么？

我在 Nuxt3 应用程序中使用来自 VueUse 的

useInfiniteScroll

可组合项：

<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core';

const el = ref<HTMLElement>(null);
const data = ref([]);
const total = ref(0);

useInfiniteScroll(el, loadData, { distance: 10 });

loadData();

async function loadData() {
  if (data.value.length !== 0 && data.value.length >= total.value) return;
  const res = await fetch(
    `https://dummyjson.com/products/?limit=10&skip=${data.value.length}`
  );
  const d = await res.json();
  total.value = d.total;
  data.value = data.value.concat(d.products);
}
</script>

<template>
  <div ref="el" class="el h-100">
    <div v-for="item in data" class="card">
      <img :src="item.thumbnail" alt="" />
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

这里有完整的 Nuxt3 复制品：https://stackblitz.com/edit/nuxt-starter-buzm4q?file=pages/index.vue

工作的 Vue3 版本在这里：https://stackblitz.com/edit/vitejs-vite-9i25xx?file=src/App.vue