Hey guys sorry for wait, here is my solution, it works for me.

        return Inertia::render('Droplets/Jupiter/Index', [
            'droplets' => Inertia::merge($droplets->items()),
            'pagination' => Arr::except($droplets->toArray(), ['data']),
            ]);

const props = defineProps({
    droplets: Array,
    pagination: Object,
});
const reachedEnd = computed(() => {
    return props.pagination.current_page >= props.pagination.last_page;
})

<Card v-for="droplet in droplets"
                        :key="droplet.id" />

<WhenVisible
                        always
                        :buffer="200"
                        v-if="!reachedEnd"
                        :key="pagination.current_page"
                        :params="{
                            preserveUrl: true,
                            only: ['droplets', 'pagination'],
                            data: {
                                page: pagination.current_page + 1,
                            },
                        }">
                        <template #fallback>
                            <p>Loading</p>
                        </template>
                    </WhenVisible>
                    <div
                        v-else
                        
                    >
                       End
                    </div>

I tried to add :always="!reachedEnd" but it always send request infinite, when I changed to v-if it does work. btw, i have been updated the latest inertiajs I am not sure it's matter for that? anyways thank you for your reply !

Infinite Scrolling