Vue: problem with laravel and vue pagination

I'm trying to get laravel pagination to work but for some reason I can only fetch first page results, even when I press page 2 when I check the request payload it's always on page one... also when I click on page two button it gets highlighted correctly but then goes back to first button active...

My pagination component:

<template>
<nav class="LAYOUTpagination1_maincontainer container">
    <button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(1)" :class="{ 'disabled' : pagination.current_page <= 1 }">
        <i class="fas fa-angle-double-left"></i>
    </button>
    <button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.current_page - 1)" :class="{ 'disabled' : pagination.current_page <= 1 }">
        <i class="fas fa-angle-left"></i>
    </button>
    <a class="LAYOUTpagination1_link c_dark fs_normal semi_bold link" type="button" @click.prevent="changePage(page)" v-for="(page, index) in pages" :key="index" :class="isCurrentPage(page) ? 'LAYOUTpagination1_active' : ''" >{{ page }}</a>
    <button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.current_page + 1)" :class="{ 'disabled' : pagination.current_page >= pagination.last_page }">
        <i class="fas fa-angle-right"></i>
    </button>
    <button class="LAYOUTpagination1_link c_dark fs_normal link" type="button" @click.prevent="changePage(pagination.last_page)" :class="{ 'disabled' : pagination.current_page >= pagination.last_page }">
        <i class="fas fa-angle-double-right"></i>
    </button>
</nav>
</template>
<script>
export default {
name:'LAYOUTpagination1',


computed: {
    pages() {
        let pages = [];
        let from = this.pagination.current_page - Math.floor(this.offset / 2);
        if (from < 1) {
            from = 1;
        }
        let to = from + this.offset - 1;
        if (to > this.pagination.last_page) {
            to = this.pagination.last_page;
        }
        while (from <= to) {
            pages.push(from);
            from++;
        }
        return pages;
    }
},


props:
{
    pagination: { required:true },
    offset: { default:4, type:Number },
},


methods:
{
    isCurrentPage: function(page) {
        return this.pagination.current_page === page;
    },
   
   
    changePage: function(page)
    {
        if (page > this.pagination.last_page)
        {
            page = this.pagination.last_page;
        }
        this.pagination.current_page = page;
        this.$emit('paginate',page);
    }
}


}
</script>

My other component where I fetch results:

<layout-pagination-1 v-if="pagination && pagination.last_page > 1" :pagination="pagination" @paginate="onGetPostsAndCategoriesPaginated"></layout-pagination-1>

methods:
{

    handlePagination(pagination)
    {
        
        this.pagination = pagination;
        this.page = pagination.current_page;
        this.numberOfPages = pagination.last_page;
        
    },



    async onGetPostsAndCategoriesPaginated()
    {
        
        this.loader = 0;
        
        try 
        {
           console.log('pagination',this.pagination);
           this.loader = 1;
            let params = { page:this.page, paginate:this.paginate };
            let response = await axios.get('/api/posts/get-posts-and-categories', { params: params });
            this.loader = 2;
            console.log(response.data.posts);
            this.posts = response.data.data.data;
            this.handlePagination(response.data.pagination);
            console.log(this.posts);
        } 
        catch (error) 
        {
            this.loader = 3;
            throw error;
        }
        
        
    },
}

Thanks in advance