Table data not being update when using el pagination component with KTdatatables

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

Datatable code

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<img alt="sad" src="https://devs.keenthemes.com/images/smiles/sad.png">
total.value = data.data.total;
loading.value = false;
}
})