VueJS & Vuetify - Array of Arrays items for a v-select not refreshing after datas have been updated

Question

In an Array of Arrays list of v-select are binded with a v-for loop.

But when i update my list of arrays with datas received from my API for each array, items in the v-select component doesn't get fresh datas and the list of each array doesn't appear.

The purpose of the other array of objects is to store the choice selected from the v-select component with the v-model binding.

The Vue template

...

<tr
v-for="(elem, idx) in anotherTable.elem"
:key="idx">
 <td>
  <v-select
  :items="liste[idx]"
  v-model="selectList[idx]"
  item-text="numLot"
  return-object
  class="input-prod"
  hide-details
  clearable
  outlined
  label="Lot composant">
   <template v-slot:item="{ item }">
    <v-list-item-content>
     <v-list-item-title
      v-text="`Lot : ${item.numLot}`"
     ></v-list-item-title>
     <v-list-item-subtitle
      v-text="`Quantité en stock : ${item.qteStock}`"
     ></v-list-item-subtitle>
     <v-list-item-subtitle
      v-text="`${item.codeLieuStock} : ${item.libLieuStock}`"
     ></v-list-item-subtitle>
     </v-list-item-content>
     <v-list-item-action>
       <v-icon>mdi-coin</v-icon>
     </v-list-item-action>
    </template>
    <template slot="no-data">
      <v-list-item>Choisir un composant</v-list-item>
    </template>
  </v-select>
</td>
</tr>
...

The JS declaration in the Vue component

data() {
 return {
  liste: [
   [], [], [], [], [],
   [], [], [], [], [],
   [], [], [], [], [],
   [], [], [], [], []
 ],
 selectList: [
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {},
   {}, {}, {}, {}, {}
  ],
 }
}

The JS to fill my array (logged and working)

for(let iC = 0; iC < anotherTable.length; iC++) {

 await ApiService.getProducts(anotherTable.component[iC].code)
 .then((res) => {
   this.liste[iC]  = [ ...res.data ];
 })
 .catch((err) => {
   this.$store.dispatch("updateSrvMsg", {type: 'error', content: err.message})
 });
}

Answer 1

It worked with both syntaxes :

this.liste[iC].splice(0, 0, ...res.data);

this.liste[iC].push(...res.data);