gridPagination.vue

<template>
    <div class="row bord-top" style="border-top: 2px solid #e9e9e9">
        <div class="col-sm-6 ">
            <p style="margin-top:10px">Exibindo {{source.from}} até {{source.to}} de {{source.total}} registros</p>
        </div>
        <div class="col-sm-6  text-right">
            <nav>
                <ul class="pagination" style="margin: 10px 0">

                    <li v-bind:class="{disabled: source.current_page == 1}">
                        <a href="#" v-on:click.prevent="nextPrev(source.current_page-1)" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li v-for="page in pages" v-bind:class="{active: source.current_page == page }">
                        <a href="#" v-on:click.prevent="navigate(page)">{{ page }}</a>
                    </li>

                    <li v-bind:class="{disabled: source.current_page == source.last_page}">
                        <a href="#" v-on:click.prevent="nextPrev(source.current_page+1)" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>

    import { range } from 'lodash'
    export default{
        props: ['source'],

        data () {
            return {
                pages: []
            }
        },

        methods: {
            navigate (page){
                this.$dispatch('navigate', page)
            },

            nextPrev (page){
                if(page == 0 || page == this.source.last_page+1){
                    return;
                }
                this.navigate(page)
            }

        },

        watch: {
            source () {
                this.pages = range(1, this.source.last_page+1)
            }
        }

    }
</script>