problem in ssr mode about vue3-infinite-loading HOT 3 CLOSED

<template>
  <section>
    <article class="result" v-for="post in posts" :key="post.id">
      <h5>{{ post.title }}</h5>
      <p>{{ post.content }}</p>
    </article>
    <InfiniteLoading @infinite="infinitePostHandler">
      <template #spinner>
        <AppSpinner />
      </template>
      <template #complete>
        <span>There are no more posts</span>
      </template>
      <template #error="{ retry }">
        <button class="btn btn-outline-dark" @click="retry">
          Retry loading posts
        </button>
      </template>
    </InfiniteLoading>
  </section>
</template>

<script setup lang="ts">
import InfiniteLoading from 'v3-infinite-loading'
import 'v3-infinite-loading/lib/style.css'

interface Post {
  id: string
  title: string
  content: string
}

let posts = ref<Post[]>([])
let page = ref(1)

const { data } = await useFetch(`/api/posts/lazy/${page}`)
posts.value.push(...data.value)

const infinitePostHandler = async ($state: {
  complete: () => void
  loaded: () => void
  error: () => void
}) => {
  console.log('loading more...')

  try {
    // Load more posts
    page.value++
    const { data } = await useFetch(`/api/posts/lazy/${page.value}`)

    if (data.value && data.value.length < 10) {
      $state.complete()
    } else {
      posts.value.push(...data.value)
      $state.loaded()
    }
  } catch (error) {
    $state.error()
  }
}
</script>