Vuetable-2 can not change page

[ginbarca]

Here is my code vue:

<template>
	<div id="layoutSidenav_content">
		<main>
			<div class="container-fluid">
				<h1 class="mt-4">Dashboard</h1>
				<ol class="breadcrumb mb-4">
					<li class="breadcrumb-item active">Dashboard</li>
				</ol>
				<div class="row">
					<div class="col-xl-3 col-md-6">
						<div class="card bg-primary text-white mb-4">
							<div class="card-body">Primary Card</div>
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small text-white stretched-link" href="#">View Details</a>
								<div class="small text-white">
									<i class="fas fa-angle-right"></i>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-md-6">
						<div class="card bg-warning text-white mb-4">
							<div class="card-body">Warning Card</div>
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small text-white stretched-link" href="#">View Details</a>
								<div class="small text-white">
									<i class="fas fa-angle-right"></i>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-md-6">
						<div class="card bg-success text-white mb-4">
							<div class="card-body">Success Card</div>
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small text-white stretched-link" href="#">View Details</a>
								<div class="small text-white">
									<i class="fas fa-angle-right"></i>
								</div>
							</div>
						</div>
					</div>
					<div class="col-xl-3 col-md-6">
						<div class="card bg-danger text-white mb-4">
							<div class="card-body">Danger Card</div>
							<div class="card-footer d-flex align-items-center justify-content-between">
								<a class="small text-white stretched-link" href="#">View Details</a>
								<div class="small text-white">
									<i class="fas fa-angle-right"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xl-6">
						<div class="card mb-4">
							<div class="card-header">
								<i class="fas fa-chart-area mr-1"></i>
								Area Chart Example
							</div>
							<div class="card-body">
								<canvas id="myAreaChart" width="100%" height="40"></canvas>
							</div>
						</div>
					</div>
					<div class="col-xl-6">
						<div class="card mb-4">
							<div class="card-header">
								<i class="fas fa-chart-bar mr-1"></i>
								Bar Chart Example
							</div>
							<div class="card-body">
								<canvas id="myBarChart" width="100%" height="40"></canvas>
							</div>
						</div>
					</div>
				</div>
				<div class="card mb-4">
					<div class="card-header">
						<i class="fas fa-table mr-1"></i>
						DataTable Example
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<client-only>
								<vuetable
									ref="vuetable"
									:http-options="httpOptions"
									:fields="fields"
									data-path="data.list"
									:query-params="getParam"
									pagination-path
									@vuetable:pagination-data="onPaginationData"
								></vuetable>
								<div style="padding-top:10px">
									<vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
								</div>
							</client-only>
						</div>
					</div>
				</div>
			</div>
		</main>
		<Footer />
	</div>
</template>

<script>
import Footer from "../components/footer";
import { Vuetable, VuetablePagination } from "vuetable-2";
import UserTableFieldsDef from "../utils/UserTableFieldsDef.js";
import axios from "axios";

export default {
	layout: "layout",
	components: {
		Footer,
		Vuetable,
		VuetablePagination,
	},
	data() {
		return {
			errors: [],
			fields: UserTableFieldsDef,
			perPage: 10,
			httpOptions: {},
			currentSort: {},
		};
	},
	mounted() {
		this.httpOptions = {
			baseURL: process.env.API_URL_AWS + "/api/users",
			headers: {
				Authorization: localStorage["auth._token.local"],
			},
		};
	},
	watch: {
		// getSortParam() {
		// 	this.$refs.vuetable.refresh();
		// },
	},
	methods: {
		getParam(sortOrder, pagination) {
			this.currentSort = sortOrder;
			let sortObj = { page: pagination };
			if (sortOrder.length > 0) {
				(sortObj.sort =
					sortOrder[0].field === "id"
						? "_" + sortOrder[0].field
						: sortOrder[0].field),
					(sortObj.type = sortOrder[0].direction);
			}
			return sortObj;
		},
		onPaginationData(paginationData) {
			let resultPaginationData = {
				total: paginationData.data.total,
				per_page: this.perPage,
				current_page: paginationData.data.current,
				last_page: Math.ceil(paginationData.data.total / this.perPage),
				next_page_url: "",
				prev_page_url: "",
				data: paginationData,
			};
			this.$refs.pagination.setPaginationData(resultPaginationData);
		},
		onChangePage(page) {
			// this.getParam(this.currentSort, page);
			this.$refs.vuetable.gotoPage(page);
		},
	},
};
</script>

my website is mysite.com/api/users/?page=1&sort=id&type=asc, i save in .env file. when send request, i include jwt authorization in header.
my issue is i can not go to other page when i click page number. it's nothing happen. i want to change my params whenever i click to page number.
here is my response data:

{
    "errorCode":0,
    "message":"Successfully",
    "data":{
        "list":[
            {
                "id":"5f511f5a63bc42006874a0b6",
                "name":"saasdf",
                "email":"aasfdsffffa3@aaa.com"
            },
            {
                "id":"5f511f5263bc42006874a0b5",
                "name":"ss",
                "email":"aasssssa3@aaa.com"
            },
            {
                "id":"5f511f4a63bc42006874a0b4",
                "name":"113",
                "email":"aaasdf3asfd@aaa.com"
            },
            {
                "id":"5f511f4363bc42006874a0b3",
                "name":"sadf asdf",
                "email":"aaa3asd@aaa.com"
            },
            {
                "id":"5f511f3c63bc42006874a0b2",
                "name":"ffff",
                "email":"aaa3ff@aaa.com"
            },
            {
                "id":"5f511f2e63bc42006874a0b1",
                "name":"sgsg sdfg",
                "email":"aaaqwe3@aaa.com"
            },
            {
                "id":"5f511f2663bc42006874a0b0",
                "name":"afsg sdg",
                "email":"aaa311@aaa.com"
            },
            {
                "id":"5f4dbbac08445c010d10138e",
                "name":"Hung Cuong",
                "email":"yotoko@gmail.com"
            },
            {
                "id":"5f4c59c17e2a780091a496ec",
                "name":"test23",
                "email":"aaa23@aaa.com"
            },
            {
                "id":"5f4c54b4dbbf0f006c312e96",
                "name":"test3",
                "email":"aaa3@aaa.com"
            }
        ],
        "current":1,
        "pages":1,
        "total":12
    }
}

sorry for my english

[ginbarca]

help me. I need soon please