gridCategory.vue

<template>

    <div class="row cstToolBar">
        <div class="col-sm-10 table-toolbar-left" >
            <button class="btn btn-primary btn-labeled fa fa-plus" type="button">Nova Categoria</button>
        </div>

        <div class="col-sm-2 table-toolbar-right">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Filtrar" v-model="filterTerm" v-on:keyup.enter="search">
                <span class="input-group-btn">
                                <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></i></button>
                            </span>
                <span class="input-group-btn">
                                <button class="btn btn-danger" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                            </span>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th width="10%">
                    <i class="fa fa-sort fa-fw" aria-hidden="true"
                       v-bind:class="{
                            'fa-sort-amount-asc':sortColumn == 'id' && sortOrder == 'asc',
                            'fa-sort-amount-desc':sortColumn == 'id' && sortOrder == 'desc'
                       }">
                    </i>
                    <a href="#" v-on:click.prevent="sort('id')">Código</a>
                </th>
                <th>
                    <i class="fa fa-sort fa-fw" aria-hidden="true"
                       v-bind:class="{
                            'fa-sort-amount-asc':sortColumn == 'name' && sortOrder == 'asc',
                            'fa-sort-amount-desc':sortColumn == 'name' && sortOrder == 'desc'
                       }">
                    </i>
                    <a href="" v-on:click.prevent="sort('name')">Nome</a>
                </th>
                <th width="5%"><a href="">Ação</a></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="categorie in data">
                <td>{{ categorie.id }}</td>
                <td>{{ categorie.name }}</td>
                <td>Ação</td>
            </tr>
            </tbody>
        </table>
    </div>
    <vue-pagination v-bind:source="pagination" @navigate="navigate"></vue-pagination>

</template>


<script>
    import VuePagination from './gridPagination.vue';

    function runResource(page = 1){
        const setRoute = '/admin/api/categoria/listar';

        let urlResource = `${setRoute}?q=${this.filterTerm}&page=${page}&column=${this.sortColumn}&order=${this.sortOrder}`;

        this.$http.get(urlResource).then(
                (response) => {
                    this.data = response.data.data;
                    this.pagination = response.data;
                },
                (error) => {
                    console.log('Ops... Your bad.', error);
                }
        );
    }

    export default{
        components: { VuePagination },
        props: ['data'],

        data () {
            return {
                sortColumn: 'name',
                sortOrder: 'asc',
                filterTerm: '',
                pagination: {}
            }
        },

        methods: {

            search () {
                runResource.call(this);
            },

            navigate (page){
                runResource.call(this, page);
            },

            sort (column){
                this.sortColumn = column;
                this.sortOrder = (this.sortOrder === 'asc') ? 'desc' : 'asc';
                runResource.call(this);
            },
        },

        ready () {
            runResource.call(this);
        }
    }
</script>