I am using kt data tables and el pagination. Now the issue is when I change the items per page dropdown of el-pagination my api returns the correct data.

But my kt data table is not being updated.
Pagination code
<el-pagination
v-model:currentPage="currentpage"
v-model:page-size="pageSize4"
:page-sizes="[10, 20, 30, 40]"
:default-page-size="20"
layout="total, sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
/>

Datatable code
<Datatable
:table-header="tableHeader"
:table-data="tableData"
:enable-items-per-page-dropdown="false"
:loading="loading"
>

API CODE
ApiService.query("orderproducts", { params: searchParams })
.then(({ data }) => {
if (data.data.data) {
tableData.value.splice(0, tableData.value.length, ... data.data.data);
console.log(tableData.value);//here i am getting 20 records but in table it shows me 10 records old on
total.value = data.data.total;
loading.value = false;
}
})