Создание стола с Vue-JS и Laravel

Question

Я только начинаю изучать laravel и vue-js, так что это довольно сложно для меня. Я хочу сделать компонент в vue-js с таблицей, с сортировкой и разбиением на страницы. Когда я начинал проект, я использовал только Laravel и jquery, так что теперь я перехожу к vue js, и это становится все сложнее. Что у меня есть это:

В моем index.blade.php

@extends('layouts.dashboard')


@section('content')
    <div class="container">
        <div class="row">
            <div class="col">
                <table class="table">
                    <thead>
                    <tr>
                        <th> @sortablelink('first_name','First name') </th>
                        <th> @sortablelink('last_name', 'Last name') </th>
                        <th> @sortablelink('email', 'E-mail address') </th>
                        <th> @sortablelink('created_at', 'Creation date') </th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody is="submissions"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">
                {{ $submissions->appends(\Request::except('page'))->render() }}
                <div class="total-submissions">
                    Total submissions:
                    {{ $submissions->firstItem() }}-{{ $submissions->lastItem() }} of {{ \App\Submission::count() }}
                </div>
            </div>
        </div>
    </div>
@stop

В моем компоненте Submissions.vue:

<template>
    <tbody>
    <tr v-for="submission in submissions" :key="submission.id">
        <td> {{submission.first_name}}</td>
        <td> {{submission.last_name}} </td>
        <td> {{submission.email}} </td>
        <td> {{submission.created_at}} </td>
        <td>
            <a class="btn btn-default btn-primary" id="btn-view"
               :href="'/dashboard/submissions/' + submission.id">View</a>
            <a class="btn btn-default btn-primary"
               id="btn-delete"
               :href="'/dashboard/submissions'"
               @click.prevent="deleteSubmission(submission)">Delete</a>
            <label class="switch">
                <input class="slider-read" name="is_read"
                       v-model="submission.is_checked"
                       @change="updateCheckbox(submission)"
                       type="checkbox">
                <span class="slider round"></span>
            </label>
        </td>
    </tr>
    </tbody>
</template>

<script>
    import qs from 'qs';
    import axios from 'axios';

    export default {
        data: function () {
            return {
                submissions: [],
            }
        },

        beforeCreate() {

        },
        created() {

        },
        mounted() {
            this.fetch();
        },
        methods: {
            fetch: function () {
                let loader = this.$loading.show();
                var queryString = window.location.search;
                if (queryString.charAt(0) === '?')
                    queryString = queryString.slice(1);

                var args = window._.defaults(qs.parse(queryString), {
                    page: 1,
                    sort: 'id',
                    order: 'asc'
                });

                window.axios.get('/api/submissions?' + qs.stringify(args)).then((response) => {
                    loader.hide();
                    this.submissions = response.data.data
                });
            },
            deleteSubmission(submission) {
                this.$dialog.confirm("Are you sure you want to delete this record?", {
                    loader: true
                })
                    .then((dialog) => {
                        axios.delete('api/submissions/' + submission.id)
                            .then((res) => {
                                this.fetch()
                            })
                            .catch((err) => console.error(err));

                        setTimeout(() => {
                            console.log('Delete action completed');
                            swal({
                                title: "Update Completed!",
                                text: "",
                                icon: "success",
                            });
                            dialog.close();
                        }, 1000);
                    })
                    .catch(() => {
                        console.log('Delete aborted');
                    });
            },
            updateCheckbox(submission)
            {
                this.$dialog.confirm("Are you sure?", {
                    loader: true
                })
                    .then((dialog) => {
                        axios.put('/api/submissions/' + submission.id, submission,
                        )
                            .then(function (response) {
                                console.log(response.data);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                        setTimeout(() => {
                            console.log('Action completed');
                            dialog.close();
                            swal({
                                title: "Update Completed!",
                                text: "",
                                icon: "success",
                            });
                        }, 0);
                    })
                    .catch(() => {
                        submission.is_checked === false ? submission.is_checked = true : submission.is_checked = false;
                        console.log('Aborted');
                    });
            },
        }
    }
</script>

Теперь то, что я хочу сделать: поместить все в компонент, но так как у меня есть php в таблице для сортировки всего, как я могу сделать это в vue? Я пытаюсь с таблицами начальной загрузки, но я не уверен, что могу отображать данные, как это. Заранее спасибо.