Javascript 无法从前端更新每页计数（Laravel、InertiaJS、VueJS）

我正在将当前应用程序从Laravel Livewire迁移到Laravel InertiaJS VueJS。目前，我一直在设置前端的每页计数，并相应地对数据进行分页。目前，我正在使用Laravel的默认分页以及VueJS的自定义分页组件，它可以无缝工作。我只想根据输入设置

$per_page

，在控制器的索引方法中，变量默认设置为5。下面是代码结构和逻辑。请以使用InertiaJS的方式帮助我实现这一点

UserController.php

    public function index(Request $request)
    {
        $per_page = \Request::get('per_page') ?: 5;

        $query = User::select('id', 'name', 'email', 'role_id', 'created_at');
        $users = $query->paginate($per_page);

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

用户/Index.vue

<template>
    <input-group borderless paddingless inline>
        <input-select @change="setPerPage($event)" id="perPage" placeholder="Per Page">
            <option value="5">5</option>
            <option value="10">10</option>
        </input-select>
    </input-group>
</template>

<script>
    import {
        Inertia
    } from '@inertiajs/inertia'

    export default {
        props: {
            users: {
                type: Object
            }
        },
        data() {
            return {
                sortField: '',
                sortDirection: ''
            }
        },
        methods: {
            setPerPage(event) {
                console.log(event.target.value);
                this.users.per_page = event.target.value;
                Inertia.reload({
                    only: ['users.data']
                });
            },
        }
    }
</script>

5.
10
进口{
惯性
}来自“@inertiajs/inertia”
导出默认值{
道具：{
用户：{
类型：对象
}
},
数据（）{
返回{
索特菲尔德：“，
排序方向：“”
}
},
方法：{
setPerPage（事件）{
日志（event.target.value）；
this.users.per_page=event.target.value；
惯性。重新加载({
仅限：['users.data']
});
},
}
}