Vue Pagination Component with limit Page Number

Pagination.vue

<template>
    <ul class="pagination" v-if="objectPage.last_page > 1">
        <li :class="{ disabled: ! prev }" v-on:click="go(prev)"><span>&laquo;</span></li>
        <li v-for="(link,k) in links" track-by="$index" :class="{ active: objectPage.current_page == link, disabled: isNaN(link) }" v-on:click="go(link)" v-bind:key="k"><span>{{ link }}</span></li>
        <li :class="{ disabled: ! next }" v-on:click="go(next)"><span>&raquo;</span></li>
    </ul>
</template>
<script>
export default {
    name:"pagination",
    props:{
        objectPage:{
            type:Object,
            required:true
        },
        limit:{
            type:Number,
            default:3,
            coerce: function (limit) {
                return limit - 1;
            }
        },
        simple:Boolean,
        action:String,
        event:{
            type:Boolean,
            default:false
        },
        eventName:String
    }, 
    computed:{
        pages(){
            var pages = [];
            for (var i = 1; i <= this.objectPage.last_page; i++) {
                pages.push(i);
            }
            return pages;
        },
        links(){
            var first = [1, '...'],
                last = ['...', this.objectPage.last_page],
                range = [];

            if (this.objectPage.current_page <= this.limit) {
                range = this.range(1, this.limit+1);
                return (this.objectPage.current_page + range.length) <= this.objectPage.last_page ? range.concat(last) : range;
            } else if (this.objectPage.current_page > (this.objectPage.last_page - this.limit)) {
                range = this.range(this.objectPage.last_page - (this.limit), this.objectPage.last_page);
                return (this.objectPage.current_page - range.length) >= 1 ? first.concat(range) : range;
            } else {
                range = this.range(this.objectPage.current_page - Math.ceil(this.limit / 2), this.objectPage.current_page + Math.ceil(this.limit / 2));
                return first.concat(range).concat(last);
            }
        },
        next: function () {
            var next = this.objectPage.current_page + 1;

            return next <= this.objectPage.last_page ? next : false;
        },
        prev: function () {
            return this.objectPage.current_page - 1;
        },
    },
    methods:{
        range: function (start, end) {
            var pages = [];

            for (var i = start - 1; i < end; i++) {
                if (this.pages[i]) {
                    pages.push(this.pages[i]);
                }
            }

            return pages;
        },
        go: function (page) {
            if (isNaN(page)) {
                return;
            }
            if(this.event){
                this.$bus.$emit(this.eventName,page)
                return   
            }
            this.$store.dispatch(this.action,page)
        }
    }
}
</script>
<style scoped lang="scss">
.pagination {
    display: inline-block;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    
    li {
        display: inline;
        
        > span {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 2px;
            color: inherit;
            cursor: pointer;
            display: block;
            float: left;
            padding: 5px 10px;
            margin-right: 0.25rem;
        }
            
        &:active,
        &:hover {
            > span {
                border-color: darken(#ddd, 10%);
            }
        }
            
        &.active {
            > span {
                background-color: #006ca4;
                border-color: darken(#006ca4, 10%);
                color: #fff;
            }
        }
            
        &.disabled {
            
            > span {
                opacity: 0.75;
                pointer-events: none;

            }
        }
    }
}
</style>