Vue Paginator Component

paginator.vue

<template>
	<div class="columns">
		<div class="column col-4">
			<select class="form-select" @change="changePerPage" v-model="itemsPerPage" number>
				<option v-for="p in perPage" track-by="$index" value="{{p}}">{{p}} REGISTROS POR PÁGINA</option>
			</select>
		</div>
		<div class="column col-4 text-center">
			<p style="margin:7px;">PÁGINA {{currentPage}} DE {{totalPages}}</p>
		</div>
		<div class="column col-4">
			<div class="btn-group float-right">
				<button type="button" class="btn" @click="prev()" :disabled="currentPage === 1">Anterior</button>
				<button type="button" class="btn" @click="next()" :disabled="currentPage === totalPages">Próximo</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['currentPage', 'totalPages', 'perPage'],

		data() {
			return {
				itemsPerPage: 10
			}
		},

		methods: {
			prev() {
				this.currentPage--;
				this.$dispatch('paginate', {page: this.currentPage});
			},

			next() {
				this.currentPage++;
				this.$dispatch('paginate', {page: this.currentPage});
			},

			changePerPage() {
				this.$dispatch('paginate', {page: this.currentPage, itens_per_page: this.itemsPerPage});
			}
		}
	}
</script>