Как заставить работать нумерацию страниц в laravel с помощью пользовательского инструмента Nova 4

Это файл tool.vue

<template>
    <LoadingView :loading = "initialLoading">


        <Heading :level = "1" class = "mb-3 flex items-center">
            <span>Adverts</span>
        </Heading>

        <div class = "flex mb-6">
            <IndexSearchInput
                :placeholder = "searchPlaceholder"
            />
            <div class = "w-full flex items-center" >
                <!-- Create / Attach Button -->
                <CreateResourceButton
                    :label = "createButtonLabel"
                    :singular-name = "singularName"
                    :resource-name = "resourceName"
                    class = "flex-shrink-0 ml-auto mb-6"
                />
            </div>
        </div>
        <Card>
            <ResourceTableToolbar>

            </ResourceTableToolbar>
            <LoadingView :loading = "loading">
                <table class = "w-full divide-y divide-gray-100 dark:divide-gray-700"
                       data-testid = "resource-table">
                    <thead class = "bg-gray-50 dark:bg-gray-800">
                    <tr>
                        <th class = "td-fit uppercase text-xxs text-gray-500 tracking-wide pl-5 pr-2 py-2"><span class = "sr-only">Selected Resources</span></th>
                        <th class = "text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">ID</th>
                        <th class = "text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Headline</th>
                        <th class = "text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Start Date</th>
                        <th class = "text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">End Date</th>
                    </tr>
                    </thead>
                    <tbody class = "divide-y divide-gray-100 dark:divide-gray-700">
                    <tr class = "group" v-for = "(item, index) in items" :key = "index">
                        <td class = "py-2 cursor-pointer td-fit pl-5 pr-5 dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900"><input type = "checkbox" class = "checkbox" aria-label = "Select Resource 1" data-testid = "adverts-items-0-checkbox" dusk = "1-checkbox"></td>
                        <td class = "px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">
                            <div class = "text-left"> <span class = "whitespace-nowrap">{{ item.id }}</span></div>
                        </td>
                        <td class = "px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.headline }}</td>
                        <td class = "px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.start_date }}</td>
                        <td class = "px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.end_date }}</td>
                    </tr>
                    </tbody>
                </table>
                <pagination-links
                    v-if = "resourceResponse"
                    :resource-name = "resourceName"
                    :resources = "resources"
                    :resource-response = "resourceResponse"
                    @previous = "selectPreviousPage"
                    @next = "selectNextPage">
                </pagination-links>
            </LoadingView>
        </Card>
    </LoadingView>
</template>

<script>
import axios from 'axios';
import { Paginatable, PerPageable } from 'laravel-nova';

export default {

    mixins: [
        Paginatable,
        PerPageable
    ],

    data() {
        return {
            items: [],
            initialLoading: true,
            loading:false,
            createButtonLabel: 'Create New Advert',
            searchPlaceholder: 'Search Adverts',
            singularName: 'Advert',
            resourceName: 'Adverts',
        };
    },
    mounted() {
        this.getAdverts();
    },
    methods: {
        getAdverts() {
            this.initialLoading = false;
            this.loading = true;
            axios.get('/nova-vendor/manager/index')
                .then(response => {
                    this.items = response.data;
                    this.loading = false;
                })
                .catch(error => {
                    console.info(error);
                });

        },
        computed: {
            /**
             * Return the heading for the view
             */
            headingTitle() {
                if (this.initialLoading) {
                    return '&nbsp;'
                } else {
                    return 'Adverts'
                }
            },
        }
    }
}
</script>

<style>
/* Your custom styles here */
</style>

Мне сказали следующее:

1 Импортируйте миксин Paginatable в начало файла:

import { Paginatable } from 'laravel-nova';

2 Добавьте миксин Paginatable в массив миксинов:

mixins: [ Paginatable]

3 Измените метод getAdverts, чтобы использовать метод разбиения на страницы, предоставляемый миксином Paginatable:

getAdverts() {
    this.initialLoading = false;
    this.loading = true;
    this.paginate(axios.get('/nova-vendor/manager/index'))
        .then(response => {
            this.items = response.data;
            this.loading = false;
        })
        .catch(error => {
            console.info(error);
        });
   }
       

4 Добавьте в шаблон компонент pagination-links:

<pagination-links
    v-if = "resourceResponse"
    :resource-name = "resourceName"
    :resources = "resources"
    :resource-response = "resourceResponse"
    @previous = "selectPreviousPage"
    @next = "selectNextPage">
</pagination-links>```

Но это не работает, я получаю следующую ошибку:

ПРЕДУПРЕЖДЕНИЕ в ./resources/js/pages/Tool.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue- loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/Tool.vue?vue&type=script&lang=js) 4:11-22 export 'Paginatable' (импортируется как ' Paginatable') не был найден в laravel-nova (возможные экспорты: CopiesToClipboard, DependentFormField, Errors, FieldValue, FormEvents, FormField, HandlesFieldAttachments, HandlesFormRequest, HandlesPanelVisibility, HandlesUploads, HandlesValidationErrors, HasCards, Localization, MetricBehavior, PreventsFormAbandon мент, PreventsModalAbandonment, mapProps, useCopyValueToClipboard, useLocalization)

Любая идея, как заставить это работать правильно?