Pagination vue data in laravel

Question

I'm trying to get paginate works on my data in vue.js I found package for it (gilbitron/laravel-vue-pagination) and install it but it doesn't work, I think I did everything in documentation but somehow it won't work,

controller

$projects = Project::orderby('id', 'desc')->paginate(10);

vue template

<pagination :data="projects" @pagination-change-page="load"></pagination>

component script

import pagination from 'laravel-vue-pagination';  //added here
    export default {
        data() {
            return {
                projects: []
            }
        },
        mounted: function() {
            this.load()
        },
        methods: {
            load: function(page = 1) { //added here
                axios.get('/api/projects?page=' + page) //added here
                .then(
                    response => {
                        this.projects =  (response.data);
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }
    }

Error

[Vue warn]: Unknown custom element: <pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Question

1. Did I do something wrong? How to fix this?

UPDATE

controller

public function index()
    {
        $projects = Project::orderby('id', 'desc')->paginate(10);
        return $projects->map(function($project) {
            $data = collect($project);
            $data->put('owner', $project->user);
            return $data->all();
        });
    }

PS: the reason I didn't return my data like:

return response()->json([
  "projects" => $projects,
], 200);

was to add project user to the results.

Update 2

I have made some changes in my controller and script so I can get my data as json instead of array now, but still i cannot get pagination:

how my data look like now:

{
    "projects":{
            "current_page":1,
            "data":[
                {
                    "id":38,"
                    user_id":1,
                    "title":"wwwwwwwwwwwwwwwwwwwww",
                    "slug":"wwwwwwwwwwwwwwwwwwwww",
                    "body":"wwwwwwwwwwwwwwww",
                    "created_at":"2018-08-10 15:55:28",
                    "updated_at":"2018-08-10 15:55:28",
                    "user":{
                        "id":1,
                        "name":"admin",
                        "email":"admin@admin.com",
                        "created_at":"2018-08-02 10:57:47",
                        "updated_at":"2018-08-02 10:57:47",
                        "profile":{
                            "id":1,"
                            user_id":1,"
                            photo":"project-attachment-1533159133.png",
                            "created_at":"2018-08-02 10:57:48",
                            "updated_at":"2018-08-02 10:57:48"
                        }
                    }
                },
            ]
        }
}

controller

public function index()
    {
        $projects = Project::orderby('id', 'desc')->with('user')->with('user.profile')->paginate(10);
        return response()->json([
            "projects" => $projects,
        ], 200);
    }

component

<script>
import pagination from 'laravel-vue-pagination';

    export default {
        data() {
            return {
                projects: []
            }
        },
        mounted: function() {
            this.load()
        },
        components: {
            pagination
        },
        methods: {
            load: function(page = 1) {
                axios.get('/api/projects?page=' + page)
                .then(
                    response => {
                        this.projects =  (response.data.projects.data); //here has changed
                    }     
                )
                .catch(function (error) {
                    this.errors.push(error);
                    console.log(error);
                })
            }
        }
    }
</script>

Answer 1

You need to register the imported pagination component app.js

import pagination from 'laravel-vue-pagination';

Vue.component('pagination', pagination);

Answer 2

You need to register the imported pagination component in the current component, i.e. add components: { pagination } to export default:

export default {
  ...,
  components: {
    pagination
  }
}