Infinite Scroll in InertiaJS + Vue

InfiniteScroll.vue

<template>
	<div>
    <ul>
      <li v-for="product in products_data" class="py-6">
        <inertia-link :href="'products/' + product.id">{{ product.name }}</inertia-link>
      </li>
    </ul>
	</div>
</template>

<script>
  import Layout from '@/Shared/Layout'

  export default {
    layout: Layout,
    data() {
      return {
        products_data: this.products.data,
      }
    },
    props: {
      products: Object,
    },
    methods: {
      scroll: function () {
        const self = this;

        window.onscroll = function(ev) {
          if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
            const product_links = self.products.links;
            const next = product_links[product_links.length - 1];

            if (next.url) {
              self.$inertia.visit(next.url, {
                preserveScroll: true,
                preserveState: true,
              });

              self.products_data.push(...self.products.data);
            } 
          }
        };
      }
    },
    mounted () {
      this.scroll();
    }
  }
</script>

The problem on that solution is that the first page disappears when the 2nd page is loaded. So it's not possible to scroll back or refresh the page. I've seen some solutions using axios in the www.

infinity scroll in inertia js

this link is also useful. it has inertia URL change problem solution.