Javascript 为什么vfor无法输出更多的个人资料，以实现无限滚动效果

嗨，我有一个Firestore数据库，我从那里获得配置文件，然后使用v-for在一个页面上显示它们，但我想放一个无限的卷轴在更好的用户体验. 这是我的Java脚本可组合代码

import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"

const getPremium = () => {
    const Premium = ref([])
    const error = ref(null)

    
const load = async () => {
    try{
        const res = await projectFirestore.collection('Premium').limit(4).get()
        

        Premium.value = res.docs.map(doc => {
           console.log(doc.data())
           return {...doc.data(), id: doc.id}
        })
    }
    catch (err){
        error.value = err.message
        console.log(error.value)
    }
    const newPicturesCount = await load()
    if (newPicturesCount > 0) {
        return load() // More profiles to come
      }

      return console.log("done") // Done with the profiles
    }

    return { Premium, error, load }
}

export default getPremium

我所期望的是，它将然后v-对于其余的结果，并使它，以便第一个配置文件将加载，然后是下一个，以使用户体验更好，与较少的加载时间，但配置文件被记录在控制台，因为他们加载，但他们并没有出现在v-for语句中，正如我所预期的，它似乎得到相同的4个配置文件一遍又一遍，这不是我想要的，这里的VUE结束了完整的画面.

<div v-for =" Premiums in Premium" :key="Premiums.id" >
 <router-link :to="{ name: 'Samplepremium', params: { id: Premiums.id }}">
 <div class= "hover:scale-105 transition ease-in-out duration-300 bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-900 text-neutral-400 font-bold rounded-xl">
  <br>
     <p class="text-xl">{{ Premiums.Name }}</p>
     <div class="relative">
     <img :src= "Premiums.Pic1"  class="object-contain px-1 inline-block w-96 h-44 md:w-60 md:h-80 lg:w-60 lg:h-80 xl:w-60 xl:h-80 2xl:w-60 2xl:h-80 transition ease-in-out duration-300">
     <p class="bg-red-700 text-slate-300 text-xl absolute top-0 w-full">{{ Premiums.detail1 }}</p>
     <p class="bg-red-700 text-slate-300 text-xl absolute bottom-0 w-full"> {{ Premiums.detail2 }} </p>
    </div>
     <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
     <p>Age:</p>
     <p>{{ Premiums.detail3 }}</p>
     <p>Location:</p>
     <p>{{ Premiums.detail4 }}</p>
     <p>Rates:</p>
     <p>{{ Premiums.detail5 }} /hr</p>
     <p>Phone:</p>
     <p>{{ Premiums.detail6 }}</p>
   
    </div><br>
  </div>
  </router-link>
  </div>
</template>

如果任何人有任何关于如何跟踪我的文档，以及如何在首字母for之后使用v-for配置文件的 idea ，我会非常感激的，谢谢.