vue(element-ui)でページングを実現させたい

現在element-uiを使ってページングを作成しようとしているのですが、どうしたら取得したデータとpaginationタグを紐付けて正常に動作させるのか方法がわかりません。
やりたいこと
・総件数を表示する
・現在表示している場所を表示する
・一つのページに約（例）100件
このうち「現在表示している場所を表示する」は、el-paginationを少しカスタマイズしればできました。

できていないこと
・paginationと取得したデータが同期していない
・例えば2（次のページ）を押しても1ページ目と何も変わらない

pagination.vue

<template>
		<el-pagination
			:current-page.sync="currentPage"
			:page-size.sync="pageSize"
			:layout="layout"
			:page-sizes="pageSizes"
			:total="total"
			v-bind="$attrs"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { scrollTo } from "@/utils/scroll-to";

@Component({
	name: "Pagination",
})
export default class extends Vue {
	@Prop({ required: true }) private total!: number;

	@Prop({ default: 1 }) private page!: number;

	@Prop({ default: 20 }) private limit!: number;

	@Prop({ default: () => [60] }) private pageSizes!: number[];

	@Prop({ default: "total, sizes, prev, pager, next, jumper" }) private layout!: string;

	get currentPage() {
		return this.page;
	}

	set currentPage(value) {
		this.$emit("update:page", value);
	}

	get pageSize() {
		return this.limit;
	}

	set pageSize(value) {
		this.$emit("update:limit", value);
	}

	handleSizeChange(value: number) {
		this.$emit("pagination", { page: this.currentPage, limit: value });
	}

	handleCurrentChange(value: number) {
		this.$emit("pagination", { page: value, limit: this.pageSize });
	}
}
</script>

index.vue

<template>
		<pagination
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
			:total="20"
			layout="prev, pager, next"
			@pagination="getList"
		/>
</template>

<script lang="ts">
@Component({
	name: "hogehoge",
	components: {
		Pagination,
	},
})
export default class extends Vue {
	private total = 0;

	private listQuery = {
		page: 1,
		limit: 5,
	};

	private data: hoge[] = [];

	created() {
		this.getList();
	}
	private async getList() {
		try {
//API側で数千件のデータをselect * from hogeで取得している 
			this.data = await api取得関数() as hoge[];
		} catch (error) {
            エラー処理
		}
    }
}
</script>

色々と、省略はしてりとりあえず値を入れている等の箇所もありますが、必要なとこだけ掲載しました。