Pagination problems in Vue and Laravel

Here is a component I've made for my Vue app within a laravel project.

<template>
        <div>
            <h2 class="text-center mt-3 mb-5">Categories</h2>
            <form v-on:submit.prevent="addCategory">
                <div class="row">
                    <div class="col-2"></div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" v-model="name.name">
                        </div>
                    </div>
                    <div col-2>
                        <button class="ml-5 btn btn-primary" v-on:submit.prevent="addCategory">Add New Tag</button>
                    </div>
                    <div class="col-2"></div>
                </div>
            </form>


            <div class="row">
                <div class="col-2"></div>
                <div class="col-md-8">
                    <br/>
                    <table class="table table-hover">
                        <thead>
                        <tr class="alert-info">
                            <td>ID</td>
                            <td>Category Name</td>
                            <td style="width: 25%">Actions</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="category in categories.data">
                            <td>{{ category.id }}</td>
                            <td>{{ category.name }}</td>
                            <td>
                                <router-link :to="{name: 'EditCategory', params: { id: category.id }}"
                                             class="btn btn-primary btn-sm ml-auto">Edit
                                </router-link>
                                <button class="btn btn-danger btn-sm" v-on:click="deleteCategory(category.id)">Delete
                                </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <vue-pagination :pagination="categories" @paginate="fetchCategories()" :offset="4"></vue-pagination>
                    <hr class="custom-hr-divider"/>
                </div>
                <div class="col-2"></div>
            </div>
        </div>

    </template>

    <script>
        export default {
            data() {
                return {
                    categories:{
                        total: 0,
                        per_page: 2,
                        from: 1,
                        to: 0,
                        current_page: 1
                    },
                    name: {}
                }
            },

            created: function () {
                this.fetchCategories();
            },

            components:{
                VuePagination: require('../components/Pagination.vue')
            },

            methods: {
                fetchCategories() {
                    this.axios.get('/categories/index?page=' + this.current_page)
                        .then(function (response) {
                            this.users = response.data.data;
                            this.pagination = response.data;
                        })
                        .catch(() => {
                            console.log('handle server error from here');
                        });
                },

                deleteCategory(id) {
                    let uri = `http://localhost:8000/categories/delete/${id}`;
                    this.axios.delete(uri);
                    this.fetchCategories();
                },

                addCategory() {
                    let uri = 'http://localhost:8000/categories';
                    this.axios.post(uri, this.name).then((response) => {
                        this.fetchCategories();
                        this.name = {};
                    })

                }
            }
        };
    </script>

Here is the Pagination.vue file I found in an online tutorial.

My app works fine without pagination but introducing this code causes the following errors.

***[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VuePagination>
       <DisplayCategory> at resources\assets\js\components\DisplayCategory.vue
         <Root>***

Where do I define define the component? Ive been trying to get this to work for hours.

app.js

import Vue from 'vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

Vue.use(VueAxios, axios);

import App from './App.vue';
import DisplayTag from './components/DisplayTag.vue';
import EditTag from './components/EditTag.vue';
import DisplayCategory from './components/DisplayCategory.vue';
import EditCategory from './components/EditCategory.vue';

const routes = [
    {
        name: 'DisplayTag',
        path: '/tags',
        component: DisplayTag
    },
    {
        name: 'EditTag',
        path: '/tags/edit/:id',
        component: EditTag
    },
    {
        name: 'DisplayCategory',
        path: '/categories',
        component: DisplayCategory
    },
    {
        name: 'EditCategory',
        path: '/categories/edit/:id',
        component: EditCategory
    }
];


const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Anyone with any ideas what I'm doing wrong? Thanks in advance.