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>

infinity scroll in inertia js

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