我正在尝试用Laravel 9和Vue 3实现分页，但这是我第一次这样做，我不知道该怎么做。
首先，我导入了我的库：

import { Link }  from '@inertiajs/inertia-vue3';

第二，我在components文件夹中有我的组件分页。

<script setup>
import { Link }  from '@inertiajs/inertia-vue3';

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});
</script>

<template>
    <div v-if="data.links.length > 3" class="flex justify-center mt-4 space-x-4">
        <Link
            v-for="(link, k) in data.links"
            :key="k"
            class="px-4 py-3 text-sm leading-4
            bg-white rounded hover:bg-white
            focus:text-indigo-500 hover:shadow"
            :class="{'bg-indigo-400 text-white': link.active}"
            :href="link.url"
            v-html="link.label"
        />
    </div>
</template>

第三步，将组件导入到另一个组件中：

<!-- ... -->
    </table>
    <pagination :data="preContracts" />
</template>

<script>
import usePrecontract from "../composables/precontract"
import { onMounted, defineComponent } from 'vue'
import pagination from "../components/pagination"
import { Head } from "@inertiajs/inertia-vue3";
import { Link } from "@inertiajs/inertia-vue3";
import { Inertia } from "@inertiajs/inertia";

export default defineComponent({
    name: 'datatablePreContracts',
    setup() {
        const { preContracts, getPrecontract, deletePrecontract, queryForKeywords } = usePrecontract()

        onMounted(getPrecontract)

        function remove(id) {
            deletePrecontract(id)
        }

        function searchId(action) {
            let id = document.getElementsByClassName('id_search')[0].value
            const params = [action, id];

            queryForKeywords(params)
        }

        function searchName(action) {
            let id = document.getElementsByClassName('name_search')[0].value
            const params = [action, id];

            queryForKeywords(params)
        }

        function searchPhone(action) {
            let id = document.getElementsByClassName('phone_search')[0].value
            const params = [action, id];

            queryForKeywords(params)
        }

        function contract(action) {
            alert("llego contract -> " + action);
        }

        function edit(action) {
            alert("llego edit -> " + action);
        }

        function show(action) {
            alert("llego show -> " + action);
        }

        function installation(action) {
            alert("llego installation -> " + action);
        }

        return {
            preContracts,
            remove,
            searchId,
            searchName,
            searchPhone,
            contract,
            edit,
            show,
            installation
        }
    }
})
</script>

在app.js中，我有以下代码：

import pagination from './components/pagination';

const app = createApp({
    components: {
        datatableUsers,
        datatableRoles,
        datatablePermissions,
        datatablePrecontract,
        pagination
    }
}).mount('#app')

但是当我的页面加载时，我在控制台中有这个：
无法解析组件：分页如果这是本机自定义元素，请确保通过compilerOptions.isCustomElement.at将其从组件解析中排除
我不知道我做错了什么。有人能帮我吗？

• • 更新**

在@Angelina的帮助下，我解决了网络浏览器控制台中的问题：
在app.js中，我更改了以下内容：

const app = createApp({
    components: {
        datatableUsers,
        datatableRoles,
        datatablePermissions,
        datatablePrecontract,
    }
})
app.component('pagination', pagination);
app.mount('#app')

然后我挂载了组件，但是现在我的分页没有显示：

<pagination :data="preContracts.links" />

• • 更新2**

{,…}
data: [{id: 10000, id_date: 0, id_commercial: 35, numerical_serie: 0, co_owner: 0, simplify: 0,…},…]
links: {first: "http://www.crm.local:8081/api/preContractApi?page=1",…}
meta: {current_page: 1, from: 1, last_page: 100,…}

这是我控制台里的数据。
谢谢你的帮助，对不起，我的英语不好。