Paginations buttons does not appear when I want to use filtering feature

[veptune]

Hello all,

I have a very weird issue.

Here is my component. Not very complicated. With pagination. I wanted to add a filtering feature.

import { helperGetDataFromServer} from '../helper.js';

export default {

      data() {
        return {
    
              users: [],

              currentPage:1,

              filters: {
                    email: { value: '', keys: ['email'] }
                }
        }
          
      }

      ,

      methods:
      {

        async getListUser()
        {
            this.users = await helperGetDataFromServer();
        }
        
      }
        ,

        mounted()
        {

            this.getListUser();

        }

}

</script>

    Search : <input v-model="filters.email.value"/>

    <br/><br/>

    <Form @submit = "submitUpdateUser">

            <VTable
                id = "table-user" 
                class = "table"
                :data="users"
                :filters="filters"
                :pageSize="2"
                v-model:currentPage="currentPage"
                @totalPagesChanged="totalPages = $event"
                >

                    <template #head>
                        <tr>

                            <th>ID</th>
                            <th>Prénom</th>
                            <th>Nom</th>
                            <th>Email</th>
                        </tr>
                    </template>

                    <template #body="{rows}">

                        <tr v-for="user in rows" :key="user._id">

                                <td>{{user._id}}</td>
                                <td>{{user.firstname}}</td>
                                <td>{{user.lastname}}</td>
                                <td>{{user.email}}</td>
                        </tr>

                    </template>


                <br/><br/><br/>


                </VTable>

                 <VTPagination
                        v-model:currentPage="currentPage"
                        :total-pages="totalPages"
                        :boundary-links="true"
                />


    </Form>

`

When I add the and :filters="filters" if I reload the page, the pagination button does not appear. When I remove the input and filters="filters" and reload, then paginations buttons appears.

So this is really really strange..

The lenght of the loaded "users" array is 5 (in this example I set pageSize to 2.

Thank you for your help. I use Vue 3.

By the way your component is by far the best for table with Vue., much better than the Bootstrap VueComponent. It is very convenient for people who need to use an inline editor to write their like in a normal table...