How can I prevent query parameter reordering flicker in Laravel Jetstream with Vue?

I'm experiencing a flickering issue in the address bar when navigating in my Laravel Jetstream + Vue app. The URL I generate is:

http://localhost/admin/users/list?page=2&field=name&direction=asc

But on navigation, the parameters are rearranged, and the URL briefly displays as:

http://localhost/admin/users/list?direction=asc&field=name&page=2

Below are the relevant code snippets:

Controller:

PHPCopied
public function list() {
    return Inertia::render('Admin/Users/List', [
        'users' => User::orderBy(request('sort', 'id'), request('direction', 'asc'))
            ->paginate(10)->withQueryString(),
        'direction' => request('direction'),
        'sort' => request('sort'),
    ]);
}

list.vue:

JAVASCRIPTCopied
router.get(route('admin.users.list'), {
    direction: direction.value,
    page: 1,
    sort: sort.value,
});

pagination.vue:

HTMLCopied
:href="pagination.prev_page_url"

This behavior results in URLs like:

http://localhost/admin/users/list?direction=asc&page=5&sort=name

I suspect this happens because both Laravel's paginator (withQueryString) and the Vue router rebuild the query string from objects, resulting in a different parameter order. How can I prevent this flickering or maintain my specified parameter order?

Any insights or solutions would be appreciated.