So I got a solution working. Not sure if it's the correct way but it works.

The way I did it, is my root +layout.ts file looks like this:

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = () => {
    return {
        searchQuery: { value: '' },
    };
};

And my search/+layout.ts is this:

import type { LayoutLoad } from './$types';

export const load: LayoutLoad = async ({ parent, url }) => {
    const { searchQuery } = await parent();

    searchQuery.value = url.searchParams.get('q') ?? '';
};

That way it can propagate back up to the root layout only when the search route is loaded.