Vue

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in currentPageItems" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <span>Page:</span>
    <button v-for="i in paginatedItems.length" class="btn btn-secondary mr-1" :class="{'btn-success' : currentPage === i }" @click="changePage(i)">
      {{i}}
    </button>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
	data() {
       return {
          currentPage: 1,
          itemsPerPage: 3,
          items: [{id: 1, title: 'test1'},{id: 2, title: 'test2'},{id: 3, title: 'test3'},{id: 4, title: 'test4'},{id: 5, title: 'test5'},{id: 6, title: 'test6'},{id: 7, title: 'test7'},{id: 8, title: 'test8'}]
       }
    },
    computed: {
       paginatedItems() {
          let page = 1;
          return [].concat.apply(
             [], 
             this.items.map( (item, index) => 
                index % this.itemsPerPage ? 
                   [] : 
                   { page: page++, items: this.items.slice(index, index + this.itemsPerPage)}
             )
           );
       },
       currentPageItems() {
          let currentPageItems = this.paginatedItems.find(pages => pages.page == this.currentPage);
            return currentPageItems ? currentPageItems.items : [];
       }
    },
    methods: {
       changePage(pageNumber) {
          if(pageNumber !== this.currentPage)
               this.currentPage = pageNumber;
       }
    }
})