Resetting Infinite Scroll Page upon return back on the page

Basically I have a page List/Show.vue that contains books that are in reading list of current user. I am utilizing pagination functionality in Laravel to send 10 books per page, and then they are rendered in frontend Vue component by scrolling. It all works fine regarding the infinite scroll functionality, the issue I am having is when I click on one of those books and the link takes me to that page, upon clicking return button in the browser and returning to the Show.vue page, only the last page of infinite scroll pagination is shown. What I want to achieve is when a user returns back to the page, he sees the page in its initial state before any scrolling (and book loading) occurred. I don't know how to do that, so I could really use your help.

This is useInfiniteScroll.js composable:

import {ref, onMounted, onUnmounted} from 'vue';
import { usePage, router } from '@inertiajs/vue3';

export function useInfiniteScroll(initialItems, initialNextPageUrl, options = {}) {
    const items = ref(initialItems);
    const nextPageUrl = ref(initialNextPageUrl);
    const initialUrl = usePage().url;
    const landmark = ref(null);

    const loadMoreItems = () => {
        if (!nextPageUrl.value) {
            return;
        }

        router.get(nextPageUrl.value, {}, {
            preserveState: true,
            preserveScroll: true,
            onSuccess: (page) => {
                window.history.replaceState({}, '', initialUrl);
                items.value = [...items.value, ...page.props[options.itemsPropName || 'items']];
                nextPageUrl.value = page.props[options.nextPageUrlPropName || 'nextPageUrl'];
            }
        });
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                loadMoreItems();
            }
        });
    }, {
        rootMargin: options.rootMargin || '0px 0px 150px 0px'
    });


    onMounted(() => {
        if (landmark.value) {
            observer.observe(landmark.value);
        }
    });

    onUnmounted(() => {
        if (landmark.value) {
            observer.unobserve(landmark.value);
        }
    });


    return {
        items,
        landmark,
        loadMoreItems,
    };
}

This is Show.vue:

<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import BookLink from "@/Components/BookLink.vue";
import BookCard from "@/Components/BookCard.vue";
import {useInfiniteScroll} from "@/Composables/useInfiniteScroll.js";

const props = defineProps({
    books: Object,
    errors: Object,
    flash: Object,
    from: Number,
    nextPageUrl: String,
    previousPageUrl: String,
    reading_list: Object,
    to: Number,
    total: Number
});

const readingList = props.reading_list;
const totalBookNumber = props.total;


const { items, landmark } = useInfiniteScroll(props.books, props.nextPageUrl, {
    itemsPropName: 'books',
    nextPageUrlPropName: 'nextPageUrl'
});

</script>

<template>
    <AuthenticatedLayout>
        <div class="relative flex size-full flex-col bg-[#f8f9fc] group/design-root overflow-x-hidden min-h-screen"
             style='font-family: Newsreader, "Noto Sans", sans-serif;'>
            <div class="layout-container flex min-h-screen flex-col">
                <div class="px-40 flex flex-1 justify-center py-5">
                    <div class="layout-content-container flex flex-col max-w-[960px] w-full">
                        <div class="flex flex-wrap justify-between gap-3 p-4">
                            <div class="flex min-w-72 flex-col gap-3">
                                <p class="text-[#0e121b] tracking-light text-[32px] font-bold leading-tight">
                                    {{ readingList.name }}</p>
                                <p class="text-[#4e6597] text-sm font-normal leading-normal">By {{ readingList.user.name

                                    }}, {{ totalBookNumber }} books</p>
                            </div>
                        </div>
                        <h3 class="text-[#0e121b] text-lg font-bold leading-tight tracking-[-0.015em] px-4 pb-2 pt-4">
                            Books ({{ totalBookNumber }})</h3>
                        <div class="px-4 pb-2 pt-4">
                            <h4>{{ readingList.description }}</h4>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                            <BookLink
                                v-for="item in items"
                                :component="BookCard"
                                :urlLink="route('books.show', item.id)"
                                :imageUrl="item.url"
                                :name="item.title"
                            />
                            <div ref="landmark"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>