Laravel 5 + Vue.js + Vuetable-2 でページネーションがうまく機能しない

Laravel 5.8 と Vue.js 2系を利用して、データを一覧表示したいと考えています。
Vuetable-2を利用してデータの一覧表示までできたのですが、このままではデータが全て表示されてしまうため
ページネーション機能を実装しました。

こちらのサイトを参考にしました。

https://techblog.forgevision.com/entry/2018/10/15/111654

こちらのサイトをそのまま真似してもデータが取得できなかったのですが、データモードに変更してデータを自分で用意することで解決しました。

ですが、ページネーション機能をつけると、データを取得しているにもかかわらずデータが表示されなくなってしまいました。

以下コードです。

ProductController.php

PHP
1public function index(Request $request)
2    {
3        $products = Product::paginate(10);
4        return $products ?? abort(404);
5    }

PHP
1<template>
2            <div class="productList">
3              <vuetable
4                ref="vuetable"
5                :fields="fields"
6                :append-params="moreParams"
7                pagination-path=""
8                :api-mode="false"
9                :data="productList"
10                @vuetable:pagination-data="onPaginationData"
11              ></vuetable>
12              <vuetable-pagination
13                ref="pagination"
14                @vuetable-pagination:change-page="onChangePage"
15                :css="css"
16              ></vuetable-pagination>
17            </div>
18            <!-- /.productList -->
19</template>
20
21<script>
22import {
23  OK,
24  CREATED,
25  BAD_REQUEST,
26  UNPROCESSABLE_ENTITY,
27  NOT_FOUND
28} from "../../util";
29import { Vuetable, VuetablePagination } from "vuetable-2";
30
31export default {
32  components: {
33    Vuetable,
34    VuetablePagination
35  },
36  data() {
37    return {
38      productList: null,
39      css: {
40        wrapperClass: "pagenation",
41        activeClass: "active",
42        disabledClass: "disabled",
43        icons: {
44          first: "glyphicon glyphicon-backward",
45          prev: "glyphicon glyphicon-triangle-left",
46          next: "glyphicon glyphicon-triangle-right",
47          last: "glyphicon glyphicon-forward"
48        },
49      },
50      fields: [
51        {
52          name: 'code',
53          title: '商品コード',
54          sortField: 'code',
55        },
56        {
57          name: 'name',
58          title: '商品名',
59          sortField: 'name',
60        },
61      ],
62      moreParams: {
63        sort: 'code',
64        order: 'asc',
65      },
66    };
67  },
68  methods: {
69    /*async myFetch (apiUrl, httpOptions) {
70      const response = await axios.get(apiUrl, httpOptions);
71      this.productList = response.data;
72      return response;
73    },*/
74    async onSearch () {
75      const response = await axios.get('api/products');
76      this.productList = response;
77      this.$nextTick(function() {
78        //this.$refs.vuetable.refresh();  //:http-fetchに設定されたmethod(myFetch)が呼ばれる(後述)
79      });
80    },
81    onPaginationData (paginationData) {
82      this.$refs.pagination.setPaginationData(paginationData);
83    },
84    onChangePage (page) {
85      this.$refs.vuetable.changePage(page);
86    },
87    async index() {
88
89    }
90  },
91  watch: {},
92  mounted: function() {
93    this.$nextTick(() => this.$refs.code.focus());
94  },
95  created: function() {},
96  computed: {},
97};
98</script>

帰ってくる値はpromiseで、promise内にはページネーションに関するデータと、DBから取得したデータが存在します。

current_page: 1
data: Array(10)
first_page_url: "http://homestead.test/api/products?page=1"
from: 1
last_page: 14
last_page_url: "http://homestead.test/api/products?page=14"
next_page_url: "http://homestead.test/api/products?page=2"
path: "http://homestead.test/api/products"
per_page: 10
prev_page_url: null
to: 10
total: 135

データは取得できているのに反映されない原因がわかりましたら押してください。