SvelteKit - api response data (PageData) not updated after initial render

am new to svelte and svelteKit in general and am trying to load data from api and I followed the sveltekit todo sample code. It's working well for initial rendering and a tag onClick but in div on:click am updating url parameters api getting called and returns data but PageData object not updating.

Here I have attached my onClick

import { goto } from '$app/navigation'; const adhigaramClick = (adhigaram: string) => {        selectedAdhigaram = adhigaram        $page.url.searchParams.set('adhigaram',adhigaram);         goto(`?${$page.url.searchParams.toString()}`);    }

Here I have attached the api call (+page.server.ts)

    export const load: PageServerLoad = async ({url, params}) => {    let selectedPaal = "test;    const paramPaal =url.searchParams.get("paal")    const adhigaram =url.searchParams.get("adhigaram")        if (paramPaal) {            selectedPaal = paramPaal;        }    const response = await api('GET', `page/${selectedPaal}${adhigaram?`/${adhigaram}` : ''}`);    if (response.status === 404) {        return {            data: {}  as Page        };    }    if (response.status === 200) {          return {            ... (await response.json()) as Data        };    }    throw error(response.status);};

+page.svelte.ts file to get the response data(PageData)

import type { PageData } from './$types';    export let data: PageData;    $: console.log(data);

a tag click is working fine page re rendering

<a href={`?paal=${paal.keyword}`} >    {paal.titleTamil}</a>