Infinity loading in InertiaJS and VueJS

Index.vue

<template>
  <template v-for="post in allPosts" :key="post.id">
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </template>

  <span ref="loadMore"/>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Inertia } from '@inertiajs/inertia';
import { useIntersectionObserver } from '@vueuse/core'

const props = defineProps({
  posts: Object
});

const allPosts = ref(props.posts.data);
const loadMore = ref();

function loadMorePosts() {
  if (props.posts.next_page_url === null) return

  Inertia.get(props.posts.next_page_url, {}, {
    preserveState: true,
    preserveScroll: true,
    only: ['posts'],
    onSuccess: () => {
      allPosts.value = [...allPosts.value, ...props.posts.data];
      window.history.replaceState({}, page.title, "/post");
    }
  });
}

onMounted(() => useIntersectionObserver(
  loadMore.value,
  ([{ isIntersecting }]) => isIntersecting && loadMorePosts(),
  { rootMargin: "-150px 0px 0px 0px" }
));
</script>

PostController.php

public function index() {
  $posts = Post::paginate(10);
  return Inercia::render('Posts/INdex', ['posts', => $posts]);
}