VueJS Pagination directive

pagination.vue

<template>
  <ul class="pagination">
    <li v-show="current_page != 1">
      <a href="javascript:;"
          aria-label="Previous"
          v-on:click="previousPage()">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li v-for="page in total_pages"
        v-bind:class="{'active': current_page == ($index + 1)}"
        v-on:click="setPage($index + 1)">
          <a href="javascript:;">{{ $index + 1 }}</a>
        </li>
    <li v-show="current_page < total_pages">
      <a href="javascript:;" aria-label="Next" v-on:click="nextPage">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</template>

<script>
  module.exports = {
    data: function () {
        return {
          total_pages: 0
        }
    },
    props: {
      total: {
        type: Number,
        required: true
      },
      per_page: {
        type: Number,
        default: 15
      },
      current_page: {
        type: Number,
        required: true,
        twoWay: true
      }
    },

    ready: function () {
      this.calcPages();

      this.$watch(function(){
        this.calcPages();
      });
    },

    methods: {
      calcPages: function() {
        this.total_pages = Math.ceil((this.total / this.per_page), -1);
      },

      setPage: function(_page) {
        if(_page > this.total_pages) {
          this.current_page = this.total_pages;
        } else if (_page < 1) {
            this.current_page = 1;
        } else {
          this.current_page = _page;
        }

        this.$dispatch('pagination-page-change', this.current_page)
      },

      nextPage: function() {
        this.setPage(this.current_page + 1);
      },

      previousPage: function() {
        this.setPage(this.current_page - 1);
      },

      lastPage: function () {
          this.setPage(this.total_pages);
      },
    }
  }
</script>