elemen plus 分页问题 页码数量 没有随着pageSize变化而变化

为什么pageSize变了，页码还是这么多？
正常来说应该是 4 页啊 ，默认为 10 一直显示默认值的页码数不会变化。

<el-pagination
:current-page.sync="pagination.currentPage"
:page-sizes="[10, 20, 40, 80]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
:small="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
style="background-color: aliceblue;"
/>
const pagination:any =reactive({
currentPage:1,
pageSize:10,
total:0,

})
const handleSizeChange =(size:any,pager:any)=>{
pagination.pagesize = size;
console.log(size,'size',pager)
}
const handleCurrentChange =(currentPage:any,pager:any)=>{
pagination.currentPage = currentPage;
console.log(currentPage,'currentPage',pager)
}

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

element plus中现在要加上v-model动态绑定 响应式数据才得以解决问题

            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>

                pagesize: 5, //每页的数据
                currentPage: 1,//第几页
                totalCount: 1,//总条数 这些数据虽然后面会赋值为后端返回的数，但是最好不要为空
                pagesize: 5,//每页显示的条数

            //每页显示的条数
            handleSizeChange(val) {
                this.pagesize = val
                this.getData(val, 1)
                this.currentPage = 1
                console.log(val)
            },
            //显示第几页
            handleCurrentChange(val) {
                console.log(val)
                this.currentPage = val
                this.getData(this.pagesize, val)
            },
  //getData()是我获取列表的接口 没区分 你放对应位置就行