How can I update Laravel session data using Inertia Vue?

I have recently migrated from Laravel Livewire to Laravel Inertia Vue. During the course while using Livewire, I created a trait called WithPerPagePagination then created a public variable of perPage with the default value of 10 and mounted the value to the session $this->perPage = session()->get('perPage', $this->perPage);. Then with the help of lifecycle hook, created a function method updatedPerPage($value) now when ever the perPage variable is updated the value will be passed into the session using session()->put('perPage', $value); and then finally applying the pagination to the query return $query->paginate($this->perPage);. The perPage variable is wire modeled to the select input in the blade frontend.

WithPerPagePagination Trait

trait WithPerPagePagination
{
    use WithPagination;

    public $perPage = 10;

    public function mountWithPerPagePagination()
    {
        $this->perPage = session()->get('perPage', $this->perPage);
    }

    public function updatedPerPage($value)
    {
        session()->put('perPage', $value);
    }

    public function applyPagination($query)
    {
        return $query->paginate($this->perPage);
    }
}

Now in the case of Inertia Vue, how can I put the updated value of per_page into the session, from the frontend and get the above behavior. Now for the Inertia Vue application, I have defined a per_page variable within the index method, $request->has('per_page') ? $request->per_page : 5; and using it within the query as in paginate($per_page) and passing it as a prop, to the frontend. Later in the frontend, initializing the prop per_page with the type Number, and creating and returning data, paginate: { per_page: this.per_page }, then creating a method initPerPage() returning this.$inertia.replace(route('users.index', { per_page: this.paginate.per_page })). And finally, v-modeling to paginate.per_page and if whenever there is a change, run initPerPage. This method replaces the url of the route with the desired per_page value selected.

User Controller

public function index(Request $request)
{
    $per_page = $request->has('per_page') ? $request->per_page : 5;
    $users =  User::query()
                ->select('id', 'name', 'email', 'role_id', 'created_at')
                ->when($request->search, fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'))
                ->paginate($per_page)
                ->withQueryString();

    return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
        'per_page' => $per_page,
        'users' => $users
    ]);
}

User Index Vue

<template>
    <input-group inline>
        <input-select v-model="paginate.per_page" @change="initPerPage" placeholder="Per Page">
            <option value="5">5</option>
            <option value="10">10</option>
        </input-select>
    </input-group>
</template>

<script>
    import InputGroup from '@/Components/Custom/Input/Group'
    import InputSelect from '@/Components/Custom/Input/Select'

    export default {
        components: {
            InputGroup,
            InputSelect
        },
        props : {
            per_page: {
                type: Number
            }
        },
        data() {
            return {
                paginate: {
                    per_page: this.per_page
                }
            }
        },
        methods: {
            initPerPage() {
                this.$inertia.replace(route('users.index', { per_page: this.paginate.per_page }))
            }
        }
    }
</script>

Now with my current Inertia Vue approach, as soon as the user changes the per_page select input, the selected value will be added with the parameter per_page=value to the url, which makes it work, but as the per_page value is not stored into the session, whenever I refresh the page, or redirect back to the page, the per_page value is back to default. Please help me here to create the same behavior as in Livewire. Thank you for your time.