While using laravel-Vue-pagniation i not able to move to another page

In a Table, data is displayed but when I click on the page number provided by the laravel vue pagination it shows me that same page number 1. Well, the main issue is page number is not passed into the function(Composable API).

Template Table

  <table class="table table-striped table-bordered">
    <thead>
      <th>SN</th>
      <th>Account Type</th>
      <th>Name</th>
      <th>Shop Name</th>
      <th>Address</th>
      <th>contact No</th>
      <th>Email</th>
    </thead>
    <tbody>
      <tr v-for="(account, i) in accounts.data" :key="account.id">
        <td>{{ ++i }}</td>
        <td>{{ account.account_type }}</td>
        <td>{{ account.name }}</td>
        <td>{{ (account.shop_name)?account.shop_name: 'EMPTY'}}</td>
        <td>{{ account.address }}</td>
        <td>{{ account.contact_number }}</td>
        <td>{{ account.email }}</td>
      </tr>
    </tbody>
  </table>
  <Pagination :data="accounts" @pagination-change-page="getAccounts" />
</template>

In : data is passed the data that comes from composable API and in the @pagination-change-page the function is also passed from composable. Script Tag

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    },
  setup() {
    }
    const paginates = ref(10);
    const { accounts, loading, getAccounts } = accountDetails();//Composables API    
    onMounted(() => {
      getAccounts({paginate:paginates});
    });

    return { accounts, loading,getAccounts };
  },
};

Composable API In this function I received two parameters, here is where Pagination(@pagination-change-page)should throw page number!!

import { ref } from '@vue/reactivity';
import axios from 'axios';

const accountDetails = () => {
    const accounts = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = async ({page=1,paginate}) => {
        await axios.get('api/account/getAccounts?page='+page+'paginate='+paginate, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`,
                Accept: 'application/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = false;
            console.log(accounts.value);
        }).catch((resErr) => {
            loading.value = false;
            accountError.value = resErr;
        })
    }
    return { accounts, loading, accountError, getAccounts }
}
export default accountDetails;

Answer

Worked Successfully with Composition API Vue3
just remove paginate parameter from getAccounts and don’t pass paginates to that function.

Updated Code </>

Script

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    },
  setup() {
    }
   
    const { accounts, loading, getAccounts } = accountDetails();//Composables API    
    onMounted(() => {
      getAccounts();
    });

    return { accounts, loading,getAccounts };
  },
};

Composable API

import { ref } from '@vue/reactivity';
import axios from 'axios';

const accountDetails = () => {
    const accounts = ref({});
    const loading = ref(true);
    const accountError = ref({});


    const getAccounts = async (page=1) => {
        await axios.get('api/account/getAccounts?page='+page, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`,
                Accept: 'application/json',
            }
        }).then((res) => {
            accounts.value = res.data;
            loading.value = false;
            console.log(accounts.value);
        }).catch((resErr) => {
            loading.value = false;
            accountError.value = resErr;
        })
    }
    return { accounts, loading, accountError, getAccounts }
}
export default accountDetails;