Create a page table component

Modules/Page/Assets/js/components/PageTable.vue

+<template>
+    <data-tables :data="data">
+        <el-table-column prop="id" label="Id" width="100">
+        </el-table-column>
+        <el-table-column prop="title" label="Title">
+        </el-table-column>
+        <el-table-column prop="slug" label="Slug">
+        </el-table-column>
+        <el-table-column prop="created_at" label="Created at">
+        </el-table-column>
+        <el-table-column fixed="right" prop="actions" label="Actions">
+            <template scope="scope">
+                <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i class="fa fa-pencil"></i></a>
+
+                <delete-button :scope="scope" :rows="data">
+                </delete-button>
+            </template>
+        </el-table-column>
+    </data-tables>
+</template>
+
+<script>
+    import axios from 'axios'
+    let data;
+
+    export default {
+        data() {
+            return {
+                data,
+            }
+        },
+        methods: {
+            fetchData: function () {
+                let vm = this;
+                axios.get(route('api.page.page.index'))
+                    .then(function (response) {
+                        vm.data = response.data.data;
+                    })
+                    .catch(function (response) {
+                    });
+            },
+            goToEdit: function (scope) {
+                window.location = scope.row.urls.edit_url;
+            }
+        },
+        mounted() {
+            this.fetchData();
+        }
+    }
+</script>