Q-table does not update all data on a slow machine

[amav96]

I have a view that renders a component that is an abstraction of q-table, I only pass it props, and those props are the rows of the table. On a machine with high resources there are never any problems, but on machines with few resources it seems that the row-key is not doing its job and mixes up the data, that is, the record in position 0 can have the data of the record in position 5. I already tested it in production and the problem is real. The only solution I found was to empty the array that has rows and then reset it (which seems ugly to me :D)

I have this same implementation in 5 views: Users, teams, documents, managed teams and visits. All 5 views have the same problem (Mixing data.) In one view, even the value of the id column was never updated, when refreshing data or changing pages, it always showed the same results in the front, and the api json brings the correct data.

I already solved it but I would like to know if anyone else has this problem?

father component

<template>
      <table-usuarios-operativos
        :loading="trayendoUsuarios"
        :usuarios="usuarios"
        :autorizado="autorizado"
        :total-results="pagination.total_results"
        @mostrar-acciones-usuario="mostrarAccionesUsuario"
        />

</template>
<setup setup lang="ts">
const usuarios = ref<UsuarioModel[] | null>(null)
const getUsuarios = async () => {
    try {
        const response = await fetchData(filtros)
        const { data, page, total_results, last_page, has_more } = response;
        if (total_results) {
            pagination.value.has_more = has_more;
            pagination.value.page = page;
            pagination.value.total_results = total_results;
            pagination.value.last_page = last_page;
        }
       //before(wrong)
       usuarios.value = data
      // after solutions
       usuarios.value = []
       await nextTick()
       usuarios.value = data
        
    } catch (error) {
        console.error(error)
    }
}
</setup>

table component

<template>
    <div>
        <q-table
        :rows="usuarios"
        :columns="columns"
        row-key="id"
        hide-pagination
        :rows-per-page-options="[0]"
        virtual-scroll
        :loading="loading"
        v-bind="miscellaneous.table"
        >
        <template v-slot:top>
          <div>{{ $t('Total') }}: <span class="tw-font-semibold">{{ totalResults }}</span></div>
        </template>
        <template v-slot:body="props">
        <q-tr :props="props" >
            <q-td key="accion" :props="props">
                <q-icon
                class="tw-mr-2 tw-cursor-pointer"
                color="black"
                size="sm"
                name="more_vert"
                clickable
                @click="emit('mostrar-acciones-usuario', props.row)"
                />
            </q-td>    
            <q-td key="id" :props="props">
                {{ props.row.id }}
            </q-td> 
            <q-td class="tw-capitalize" key="country" :props="props">
                <div
                v-if="props.row.country?.name && getFlag(props.row.country.code)"
                >
                <q-img
                :src="getFlag(props.row.country.code)"
                style="width: 20px; height: 20px;"
                />
                </div>
                <div
                v-else-if="props.row.country?.name"
                >
                    {{ props.row.country.name }}
                </div>
                
            </q-td>
            <q-td key="user_state" :props="props">

                <q-chip square   class="tw-bg-white" dense :style="`border:1px ${props.row.user_state.color} solid;`">
                   <span class="tw-capitalize"> {{ props.row.user_state.name.replace(/_/g, ' ').toLowerCase()}}</span>
                </q-chip>
            </q-td>
            <q-td key="role" :props="props">
                {{ props.row.role.name }} <q-icon :name="iconRol(props.row.role_id)" />
            </q-td>
            <q-td key="progreso" :props="props">
                <div 
                v-if="props.row.role_id !== ROLES.ADMINISTRADOR && props.row.role_id !== ROLES.OPERADOR_ZONA" 
                v-html="procesarProgreso(props.row)">
                </div>
                <div v-else>
                    N/A
                </div>
            </q-td>
            <q-td key="created_at" :props="props">
                {{ props.row.created_at_transformado}}
            </q-td>   
            <q-td key="firstName" :props="props">
                {{ `${props.row.firstName ?? '' } ${props.row.lastName ?? ''} ${props.row.fantasyName ?? ''}` }}
            </q-td>
         
            <q-td key="email" :props="props">
                {{ props.row.email }}
            </q-td>
          
            <q-td class="tw-capitalize" key="province" :props="props">
                {{ props.row.province?.name ? props.row.province.name : '' }} 
            </q-td>
            <q-td class="tw-capitalize" key="locality" :props="props">
                {{ props.row.locality?.name ? props.row.locality.name : '' }}
            </q-td>
            <q-td class="tw-capitalize" key="street" :props="props">
                {{ props.row.street }}
            </q-td>
            <q-td key="phoneNumber" :props="props">
                {{ props.row.phoneNumber }}
            </q-td>
            <q-td key="numero_documento" :props="props">
                {{ props.row.numero_documento }}
            </q-td>
        </q-tr>
      </template>
    </q-table>

    </div>
</template>
<setup setup lang="ts">

interface Props {
  usuarios: UsuarioModel[],
  loading: boolean;
  totalResults: number
}

const props = defineProps<Props>()
const { usuarios, loading, totalResults } = toRefs(props) 

const columns : any = [
    { name: 'accion', align: 'left', label: t('Acciones'), field: 'id'}, 
    { name: 'id', align: 'left', label: t('ID'), field: 'id'},
    { name: 'country', align: 'left', label: t('Pais'), field: 'country'}, 
    { name: 'user_state', align: 'left', label: t('Estado'), field: 'user_state'},
    { name: 'role', align: 'left', label: t('Rol'), field: 'role'},    
    { name: 'progreso', align: 'left', label: t('Progreso'), field: 'id'},    
    { name: 'created_at', align: 'left', label: t('Fecha registro'), field: 'created_at'},
    { name: 'firstName', align: 'left', label: t('Nombre'), field: 'firstName'},
    { name: 'email', align: 'left', label: t('Email'), field: 'email'},
    
    { name: 'province', align: 'left', label: t('Provincia'), field: 'province'}, 
    { name: 'locality', align: 'left', label: t('Localidad'), field: 'locality'}, 
    { name: 'street', align: 'left', label: t('Calle'), field: 'street'},  
    { name: 'phoneNumber', align: 'left', label: t('Telefono'), field: 'phoneNumber'}, 
    { name: 'numero_documento', align: 'left', label: t('Nro documento'), field: 'numero_documento'},   
]
</setup>