JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <button @click="goTo(1)" :disabled="page === 1">&lt;&lt;</button>
  <button @click="next(-1)" :disabled="page === 1">&lt;</button>
  <span>{{ page }} / {{ pages }}</span>
  <button @click="next(+1)" :disabled="page === pages">&gt;</button>
  <button @click="goTo(pages)" :disabled="page === pages">&gt;&gt;</button>
  <div v-for="n in pageData" class="item">{{ n }}</div>
</div>

CSS

* {
  font-family: monospace;
}

#app {
  padding: 5px;
}

.item {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid silver;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    items: [...Array(60)].map((n, i) => i + 1),
    perPage: 7,
    page: 1,
  },
  computed: {
    pages() {
      return Math.ceil(this.items.length / this.perPage);
    },
    pageData() {
      const end = this.page * this.perPage;
      return this.items.slice(end - this.perPage, end);
    },
  },
  methods: {
    goTo(page) {
      this.page = Math.max(1, Math.min(this.pages, page));
    },
    next(change) {
      this.goTo(this.page + change);
    },
  },
});