as shown in the figure, when I click on the number of pages, I actually go to the background to paginate the query. When I click on the second page, there are six pieces of data. When I click on the query above, I re-ajax the request. At this time, the data of the page is normally displayed on the first page, but the paging below cannot be initialized. Is there any way to solve it?

<div id="app">
                <i-input v-model="username" placeholder="" clearable style="width: 200px"></i-input>
                <i-button type="primary" shape="circle" icon="ios-search" @click="querytable"></i-button>
                <i-button type="primary" shape="circle"></i-button><br/><br/>
                <i-table :columns="columns1" :data="historyData" height="550"  ></i-table><br/><br/>
                <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" show-total></Page>
            </div>

<script>
var vue =  new Vue({
    el: "-sharpapp",
    data (){
        return {
            username:"",
        //Columns1titlekeyK-V
            columns1: [
                {
                    title: "",
                    key: "username",
                    ellipsis:true
                },
                {
                    title: "",
                    key: "email"
                },
                {
                    title: "",
                    key: "createTime"
                },
                {
                    title: "",
                    key: "updateTime"
                },
                {
                    title: "",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "primary",
                                    size: "small"
                                },
                                style: {
                                    marginRight: "5px"
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, "View"),
                            h("Button", {
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, "Delete")
                        ]);
                    }
                }
            ],
            //key
            historyData: [],
            // 
            dataCount:0,
            pageNum:1,
            pageSize:10
        }
    },
    methods: {
        // 1
        querytable(){
            var dataSource = [];
            $.ajax({ 
                url: "/user/getUsers", 
                type:"post",
                data: {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    username:this.username
                },
                async : false,
                dataType:"json",
                success: function(data){
                    if(data.type == "success"){
                        dataSource = data;
                    }
              }}); 
                  this.historyData = dataSource.list;
                 this.dataCount = dataSource.count;
                // $(".ivu-page-item").removeClass("ivu-page-item-active");
                   // $("li[title=1]").addClass("ivu-page-item-active");
                 
      },
        // 2
        changepage(index){
          this.pageNum = index;
          this.querytable();
          this.pageNum = 1;
        },
        //3
        show(index){
             this.$Modal.info({
                 title: "User Info",
                 content: `Name:${this.historyData[index].username}<br>email:${this.historyData[index].email}<br>createTime:${this.historyData[index].createTime}`
             })
        },
        // 4
        remove (index) {
            // 
        }
    },
      //
         created () {
          this.querytable();
        }
    });