Vue how to use v-menu inside v-for loop

Question

I am new in Vue, trying to create an invoice detail section which select description/unit price details from a child-component then display as an entry line. I use v-for to loop each entry line in the 'invoiceDetails' array, then use v-menu to 'activate' child component by click on it, then child 'emit' the data back to parent, coding as follows :

PROBLEM FOUND : Child dialog DOES NOT CLOSE after child emitted data, and parent update the value 'editChargesModel[item.in] to false'. However, if edit the value with development tools, the child was closed.

<v-row v-for="item in invoiceDetails" :key ="item.id" >
  <v-col cols="12" sm="9" md="9" >
     <v-menu
        v-model="editChargesModel[item.id]"
        transition="scale-transition"
        :close-on-content-click="false"
     >
     <template v-slot:activator='{on, attrs}'>
        <v-list-item v-bind="attrs" v-on="on">
           <v-list-item-content>
              <v-list-item-title >{{item.description[0]['text']}}</v-list-item-title>
           </v-list-item-content>
        </v-list-item>
      </template>
      <SelectCharges v-bind='selectProps' @chargeSelectedItems="chargeModelUpdate($event, item.id )"></SelectCharges>
    </v-menu>
  </v-col>
  <v-col cols="12" sm="3" md="3">
    <v-btn outlined color="primary" @click="addNewItem()">
        <v-icon dark left>mdi-plus-circle</v-icon>
            add new line
     </v-btn>   
  </v-col>
</v-row>

data section :

 editChargesModel:[],
 invoiceItemID:0,
 invoiceDetails:[],
 defaultInvoiceItem:{
        id:0,
        sequency:"",
        description:[{text:'click here'}],
        charge_code:"",
        charge:0,
        quantity:2,
        discount_level:"",
        discount:0,
        line_total:0,
        amount:0,
 },

Method section :

initialize() {
   this.invoiceDetails.push(this.defaultInvoiceItem);
},
addNewItem(){
      let newLine = Object.assign({},this.defaultInvoiceItem)
      this.invoiceItemID ++;
      newLine.id = this.invoiceItemID;
      this.invoiceDetails.push(newLine);
},
chargeModelUpdate(src,id){
  let newLine = Object.assign({},this.defaultInvoiceItem)
    newLine.id = id;
    const res= {};
    Object.keys(newLine).forEach(k => {
      res[k] = newLine[k];
      if(src.hasOwnProperty(k)){
        if(k === 'description'){
          res[k] =[];//deleted intital message
          src[k].map(el=> res[k].push(el))
        }else{
          if(src[k]['text']){
              res[k] = src[k];
          }
        }
      }
    });
    let line_total = res.quantity * res['charge']['text'];
    let amount = line_total - res['discount']['text'];
    res.line_total = line_total;
    res.amount = amount;
    const index = this.invoiceDetails.findIndex(x=>x.id === id);
    this.invoiceDetails[index]= res;
    this.editChargesModel[id]= false; // for close the child popup item !!! NOT WORKING
  },

I think the problem is v-for does not update v-menu section, but I do know how to re-write it. Kindly let me know some hints / solutions. Thank you very much !