Rerendering new page data on client after new API fetch on same route

I have a search input in my Navbar that sends the user to the a search/[searchTerm page in the +page.server.ts that then uses the term is entered as the dynamic route param and as a search term in an API endpoint and then displays the data fetched on the +page.svelte.

My issue is, once on the the search/[searchTerm] page that is displaying the data, when I try another search the +page.server.ts load function is ran again, the dynamic route param is updated, and the new data is fetched on the server, but on the client side the data is not updating and is still showing the results from the first search. Is there a way to make the Page Data reactive? I have tried $: on the page data but the client data will not change.

+page.server.ts:

export const load: ServerLoad = async ({ params }) => {    const searchTerm: string | undefined = params.searchTerm;    const fetchSearchResults = async (searchTerm: string | undefined) => {        const response = await getSearchResults(searchTerm);        const results = await response.json();        // console.log(results.albums.items);        return results;    };    return {        results: fetchSearchResults(searchTerm)    };};

Script of my +page.svelte:

export let data: PageData;const { items } = data.results.albums;const albums = items.slice(0, 10).map((album: any) => ({    artist: album.artists.map((_artist: any) => _artist.name).join(', '),    songUrl: album.external_urls.spotify,    title: album.name,    coverImage: album.images[2].url}));

Search input on the navbar:

<form action={`/search/${searchTerm.split('').join('+')}`}><input        bind:value={searchTerm}        type="text"        placeholder="Search…"    /><button type="submit"> Search </button></form>

I have tried to deconstruct the param reactively

$: ({ items } = data.results.albums);

but that returns items as undefined.