Infinite scroll on search not working?

I'm using laravel with inertia and vue .

Infinite scroll on load when visible is working and the first search with infinite is also wroking.

What's the problem

When i again try to override that search input then the scroll is not working in the network tab also i can not see any hitting url.
Help me :(

my script

<script setup>
import { Link, router, usePage, WhenVisible } from "@inertiajs/vue3";
import AppLayout from "../../layouts/AppLayout.vue";
import { computed, ref, watch } from "vue";
import { throttle } from "lodash";

// Composable for WhenVisible loading + params logic
function useWhenVisibleParams(search, sort_by) {
    const page = usePage();
    const loading = ref(false);

    const whenVisibleParams = computed(() => ({
        data: {
            page: page.props.pagination.current_page + 1,
            ...(search.value ? { search: search.value } : {}),
            ...(sort_by.value ? { sort_by: sort_by.value } : {}),
        },
        preserveUrl: true,
        preserveState: true,
        preserveScroll: true,
        replace: false,
        only: ["films", "pagination"],
        onBefore: () => (loading.value = true),
        onSuccess: () => (loading.value = false),
        onFinish: () => (loading.value = false),
    }));

    return { whenVisibleParams, loading };
}

// Setup
const page = usePage();
const films = computed(() => page.props.films);
const reachedEnd = computed(
    () => page.props.pagination.current_page >= page.props.pagination.last_page
);

const search = ref(page.props.search || "");
const sort_by = ref(page.props.sort_by || null);

// Use the composable
const { whenVisibleParams, loading } = useWhenVisibleParams(search, sort_by);

// Sorting logic
function sortBy(value) {
    sort_by.value = value;
}

// Watch for search/sort changes and trigger page reload
watch(
    [search, sort_by],
    throttle(([searchValue, sortByValue]) => {
        let data = {
        };
        data.search = searchValue?.trim() || "";
        if (sortByValue) data.sort_by = sortByValue;

        router.reload({
            data,
            preserveState: true,
            replace: true,
        });
    }, 1000)
);
</script>

my when visible component

 <WhenVisible :always="!reachedEnd" :params="whenVisibleParams">
            <template v-if="loading">
                <div>Loading...</div>
            </template>
        </WhenVisible>

my controller

 public function index()
    {
        // $film = VerifiedFilm::where('rotten_tomatoes_rating',Null)->orWhere('metacritic_rating',Null)->count();
        // dd($film);
        // for searching with title or director
        $search = request()->input('search');
        $sortBy = request()->input('sort_by');

        $query = VerifiedFilm::query();

        // sorting
        $query->when($sortBy ?? false, function ($q) use ($sortBy) {
            $q->orderBy('imdb_rating', $sortBy);
        });

        //searching functionality
        $query->when($search ?? false, function ($q) use ($search) {
            $q->whereAny(['title', 'director'], 'LIKE', "%" . $search . "%");
        });

        $films = $query->paginate(10)->withQueryString();

        return Inertia::render('Films/Index', [
            'films' => Inertia::deepMerge(fn() => $films->items()), //deepmerge for object/array to be nested deep merge
            'pagination' => Arr::except($films->toArray(), 'data'),
            'search' => $search,
            'sort_by' => $sortBy
        ]);
    }