pagination vuejs 3 and laravel with bootstrap

Question

I´m trying to build paginate with laravel-vue-pagination and i can´t to show my links... I´m reading documentation and showing examples but i don´t know that i´m doing wrong. I want paginate result from my API resources:

return ListingResource::collection(Listing::where('cp', '=', $value)->simplePaginate(15));

I´m doing this in my API controller and result it´s:

"updated_at":"2022-05-31T07:15:08.000000Z"}],"links":{"first":"http:\/\/www.crm.local:8081\/api\/listingApi\/getRegister\/cp\/18519?page=1","last":null,"prev":null,"next":"http:\/\/www.crm.local:8081\/api\/listingApi\/getRegister\/cp\/18519?page=2"},"meta":{"current_page
....

in my app.js i want globally component:

import { Bootstrap4Pagination } from 'laravel-vue-pagination';

And including in my apps:

const app4 = createApp({
    components:{
        nAsignedCalls,
        Bootstrap4Pagination
    }
})
app4.mount('#app4')

and in my component:

<Bootstrap4Pagination :data="valor" @pagination-change-page="getResults" />

<script setup>
    import { defineProps } from 'vue';
    
    
    const props = defineProps({
        valor: {
            type: Object,
            required: true
        },
    });
    
    const getResults = async (page = 1) => {
        const response = await fetch(`/api/listingApi/getRegister?page=${page}`);
        props.valor = await response.json();
    }

    getResults();
        
</script>

but, when load my page my web browser console return:

VM2625:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<link rel="... is not valid JSON

and when i load my registers web browser console return:

Failed to resolve component: Bootstrap4Pagination
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <NAsignedCalls valor= (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] > 
  at <FormTelemarketing> 
  at <App>

I don´t know that i´m doing wrong.

UPDATE

I've got change my code to eliminate my errors and pass how property to paginate my links and in console now not show any problems or warnings. But i can´t show pagination...

const links = ref({})
const resp = await axios.get(`/api/listingApi/getRegister/${param_search.value["parameter"]}/${param_search.value["value"]}`)
            registers.value =  resp.data.data
            links.value = resp.data.links

<!-- SEND PROP LINKS TO MY COMPONENT -->

<nAsignedCalls :valor="registers" :links="links"/>  

<!-- PAGINATION IN MY COMPONENT -->

<Bootstrap5Pagination :data="links" @pagination-change-page="getResults" />
        </table>
    </div>
</template>
  
<script setup>
    import { defineProps } from 'vue';
    import { Bootstrap5Pagination } from 'laravel-vue-pagination';
    
    const props = defineProps({
        valor: {
            type: Object,
            required: true
        },
        links: {
            type: Object,
            required: true
        }
    });
    
    const getResults = async (page = 1) => {
        const response = await fetch(`/api/listingApi/getRegister?page=${page}`);
        props.valor = await JSON.parse(JSON.stringify(response));
    }

    getResults();
        
</script>

update 2

i´ve got fill my table with pagination, i change my code to this:

$pagination = $request->get('pagination');

            $pagination = ($pagination != "") ? $pagination : 10;
            
            if($parameter == 'address'){
                return ListingResource::collection(Listing::where('address', '=', $value)->simplePaginate($pagination));
            }else if($parameter == 'city'){
                return ListingResource::collection(Listing::where('city', '=', $value)->simplePaginate($pagination));
            }else if($parameter == 'cp'){
                return ListingResource::collection(Listing::where('cp', '=', $value)->paginate($pagination));
            }

when i clicked my button not selectiong pagintaion number, default it´s 10 registers, but in console return this:

traneous non-props attributes (links) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <NAsignedCalls valor= (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] links= {first: 'http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=1', last: 'http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=16', prev: null, next: 'http://www.crm.local:8081/api/listingApi/getRegister/cp/18519?page=2'} > 
  at <FormTelemarketing> 
  at <App>

i don´t know very well how i can solve this problem in my vue i change my code:

const props = defineProps({
        valor: {
            type: Object,
            required: true
        },
        data:{
            links: {
                type: Array,
                required: true
            }
        }
        
    });

<div class="row justify-content-end">
        pagination
        <Bootstrap4Pagination :data="links" @pagination-change-page="getResults" />
    </div>

Thanks for readme and help me. Sorry for my bad english