Need help with URL Query Parameter Issues in Vue 3, and Inertia

Hey, I'm trying to implement a little filter feature in my Laravel, Vue 3, and Inertia v1.0 app. I'm utilizing Spatie's Laravel Query Builder package. I already implemented the backend logic, so to speak, which was much easier to implement. However, I'm facing some issues or maybe I'm doing the right thing in the wrong way...

Here's what the filter component's logic part looks like:

const filters = [
    {
        label: "Yesterday",
        name: "filter[yesterday]",
        value: true,
    },
    ...
    ...
    ...
    {
        label: "This Year",
        name: "filter[year]",
        value: true,
    },
];

// I globally shared the request query params from the HandleInertiaRequest
// Sure thing I get these  { "q": "alice", "filter": { "yesterday": "true" } }, but I still haven't utilized that `query` yet, still thinking how can I get my hands dirty with it. 👇

const query = usePage().props?.query;


const applyFilter = (name, value) => {
    router.reload({
        data: {
            [name]: value,
        },
    });
};

But guess what, when I apply the filter for the first time (remember, I already have some queries in the URL), my URL looks like this: /search/projects?q=alice&filter[yesterday]=true, which is fine.

However, when I try to apply another filter, my URL looks like this: /search/projects?q=alice&filter[yesterday]=true&filter[month]=true, which is not what I want. I want to replace the existing filter in the URL and ensure that the filter works only once.

Additionally, there could be other queries in the URL like filter['is_admin']=true, but they should not be replaced.

So, in the final stage, the filter feature should look like this: — I search for something. The URL now looks like this: /search/projects?q=alice

— I add a filter from the dropdown. The URL should have this: ?q=alice&filter[month]=true

— I want to switch to another filter, and now the URL should lookk like this: ?q=alice&filter[year]=true

What should I do?

.

.

.

.

.

Here's the Button that triggers the filter:

<LinkButton
    v-for="filter in filters"
    :key="filter.name"
    @click="applyFilter(filter.name, filter.value)"
>
    {{ filter.label }}
</LinkButton>