Edit in JSFiddle

new Vue({
  el: '#page-demo',
  data: {
    //現在のページ数
    page: 0,
    //1ページに表示するアイテム数
    dispItemSize: 2,
    //表示するpaginationのインデックス数
    showPageCount: 9,
    //1ページ目から9ページ目のdata数の10分の1の数
    from_one_to_nine_page: 1.8,
    data: [{
      key: '1',
      value: 'value1'
    }, {
      key: '2',
      value: 'value2'
    }, {
      key: '3',
      value: 'value3'
    }, {
      key: '4',
      value: 'value4'
    }, {
      key: '5',
      value: 'value5'
    }, {
      key: '6',
      value: 'value6'
    }, {
      key: '7',
      value: 'value7'
    }, {
      key: '8',
      value: 'value8'
    }, {
      key: '9',
      value: 'value9'
    }, {
      key: '10',
      value: 'value10'
    }, {
      key: '11',
      value: 'value11'
    }, {
      key: '12',
      value: 'value12'
    }, {
      key: '13',
      value: 'value13'
    }, {
      key: '14',
      value: 'value14'
    }, {
      key: '15',
      value: 'value15'
    }, {
      key: '16',
      value: 'value16'
    }, {
      key: '17',
      value: 'value17'
    }, {
      key: '18',
      value: 'value18'
    }, {
      key: '19',
      value: 'value19'
    }, {
      key: '20',
      value: 'value20'
    }, {
      key: '21',
      value: 'value21'
    }, {
      key: '22',
      value: 'value22'
    }, {
      key: '23',
      value: 'value23'
    }, {
      key: '24',
      value: 'value24'
    }, {
      key: '25',
      value: 'value25'
    }, {
      key: '26',
      value: 'value26'
    }, {
      key: '27',
      value: 'value27'
    }, {
      key: '28',
      value: 'value28'
    }, {
      key: '29',
      value: 'value29'
    }, {
      key: '30',
      value: 'value30'
    }, {
      key: '31',
      value: 'value31'
    }, {
      key: '32',
      value: 'value32'
    }, {
      key: '33',
      value: 'value33'
    }, ]
  },
  methods: {
    showFirst: function() {
      this.page = 0;
    },
    showPrev: function() {
      if (this.isStartPage) return;
      this.page--;
    },
    showNext: function() {
      if (this.isEndPage) return;
      this.page++;
    },
    showLast: function() {
      this.page = Math.floor((this.data.length - 1) / this.dispItemSize);
    },
    showPage: function(index) {
      this.page = index;
    }
  },
  computed: {
    dipsItems: function() {
      var startPage = this.page * this.dispItemSize;
      return this.data.slice(startPage, startPage + this.dispItemSize);
    },
    isStartPage: function() {
      return (this.page == 0);
    },
    isEndPage: function() {
      return ((this.page + 1) * this.dispItemSize >= this.data.length);
    },
    pageCount: function() {
      return this.data.length % this.dispItemSize == 0 ? Math.floor(this.data.length / this.dispItemSize - 1) : Math.floor(this.data.length / this.dispItemSize);
    },
    neighborPages: function() {
      const sidePageCount = Math.floor(this.showPageCount / 2)

      var start = 0;
      var end = 0;
      //paginationを表示するか表示しないか(データの入力が0件から18件以内時
      if (Math.floor((this.data.length - 1) / this.dispItemSize) >= -1 && ((this.data.length - 1) / this.dispItemSize) <= this.from_one_to_nine_page) {
        start = 0;
        if (this.data.length == 0) {
          end = -1;
        } else if (this.data.length <= this.dispItemSize) {
          end = 0;
        } else {
          end = Math.ceil((this.data.length - 1) / this.dispItemSize);
        }
      } else {
        start = Math.max(Math.min(this.pageCount, this.page + sidePageCount), this.showPageCount) - 9;
        end = Math.max(Math.min(this.pageCount, this.page + sidePageCount), this.showPageCount);
      }

      const pages = []
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    },
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div id="page-demo">
  <div id="pagination">
    <ul class="pagination">
      <li v-on:click="showFirst" class="[isStartPage ? 'disabled' : '']"><a>&laquo;</a></li>
      <li v-on:click="showPrev" class="[isStartPage ? 'disabled' : '']"><a>&lt;</a></li>
      <li v-on:click="showPage(index)" v-bind:class="{ active: page == index }" v-for="index in neighborPages"><a>{{index + 1}}</a></li>
      <li v-on:click="showNext" class="[isEndPage ? 'disabled' : '']"><a>&gt;</a></li>
      <li v-on:click="showLast" class="[isEndPage ? 'disabled' : '']"><a>&raquo;</a></li>
    </ul>
  </div>
  <ul>
    <li v-for="data in dipsItems">{{data.key}} - {{data.value}}</li>
  </ul>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>