Paginate output rows based on the user selection

I want to paginate the output rows based on the user selection (Like they do in MySQL, showing number of rows). I am sing Laravel 5.4 and Vue.js. Here is what i have done so far:

Route:

Route::get('fetchCategory', 'CategoryController@fetchCategory');

Route::resource('category', 'CategoryController');

Controller:

public function index()
         {
                 return view('pages.category.index');
         }

public function fetchCategory()
         {
                 return Category::orderBy('id', 'desc')->paginate(5);
         }

index.blade.php:

<form action="" method="POST">
    Show
    <select class="" name="" id="">
        <option value="5" selected="selected">5</option>
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>     
     </select> 
</form>     

        <categories></categories>

Categories.vue:

<template>
            <div>
                <table v-if="categories.length > 0" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr class="info">
                            <th style="width:10%;">Sl</th>
                            <th style="width:25%;">Category Name</th>
                            <th style="width:18%;">Status</th>
                            <th style="width:40%;">Category Details</th>
                            <th style="width:7%;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <category 
                        v-for="(category, index) in categories" 
                        v-bind:category="category" 
                        v-bind:index="index"
                        v-bind:key="category.id"
                        ></category>
                    </tbody>
                </table>

        <paginator :dataSet="dataSet" @changed="fetch"></paginator>

    </div>
</template>

<script>
    import Category from './Category.vue';

    export default {

    components: { Category },

    data() {
        return {
            dataSet: false,
            categories: []
        }
    },

    created() {
        this.fetch();
    },

    methods: {
        fetch(page) {
            axios.get(this.url(page))
            .then(this.refresh);
        },

        url(page) {
            if (! page) {
                let query = location.search.match(/page=(\d+)/);
                page = query ? query[1] : 1;
            }
            return '/fetchCategory/?page=' + page;
        },

        refresh({data}) {
            this.dataSet = data;
            this.categories = data.data;
            }
        }
    }
</script>

So what I want is to paginate the output rows based on user selection. How can I implement this on my current code?I can think of a ajax request every time the value of selection box changed and send it to a function of the controller. But what is the best practice to implement this?

via Chebli Mohamed