Vue component does not show updated data even if prop data is changed

Question

This is my parent component abc.vue

<v-card outlined class="mt-4">
        <DetailsTable v-show="toggleClientData" :columnDefs="columnDefs" :rowData="rowData" />
</v-card>

methods:{
aggridData() {
     let self = this;
      this.columnDefs = [
            {
              header:"name",
              field:"name",
              editable: true,
              onCellValueChanged: function(params) {
               self.updateClient();
              }
             }
           ]
      this.rowData = [{name:"abc",age:21},{name:"xyz",age:23}];
    },
 updateClient(){
   this.rowData[0].name = "cat"
 }
}

Now this is my child component DetailsTable.vue

<template>
  <ag-grid-vue
    style="width: 100%; height: 600px"
    class="ag-theme-balham"
    id="myGrid"
    :enableRangeSelection="true"
    :defaultColDef="{
              resizable: true,
              sortable: true,
              filter: true,
              width: 100
            }"
    :columnDefs="columnDefs"
    :processCellForClipboard="processCellForClipboard"
    :rowData="newRowData"
    :modules="[...agModule, ...agCModule]"
  ></ag-grid-vue>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";
import { AllModules } from "ag-grid-enterprise/dist/ag-grid-enterprise";
import { AllCommunityModules } from "ag-grid-community/dist/ag-grid-community";

LicenseManager.setLicenseKey(process.env.VUE_APP_AG_KEY);
import axios from "axios";

export default {
  name: "DetailsTable",
  props: {
    columnDefs: {
      type: Array,
      default() {
        return null;
      }
    },
    rowData: {
      type: Array,
      default() {
        return null;
      }
    }
  },
  components: {
    "ag-grid-vue": AgGridVue
  },
  data() {
    return {
      agModule: AllModules,
      agCModule: AllCommunityModules
    };
  },
  computed: {
    newRowData() {
      return this.rowData;
    }
  },
  beforeMount() {
    this.processCellForClipboard = params => {
      return `${params.value.trim()},`;
    };
  }
};
</script>

<style lang="sass" scoped>
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
</style>

Now in the beginning the newRowData contains the value of the rowData before the updateclient method is called. Once the value is updated from the ag grid table the update client function is called and then the name is changed. Now here the newRowData in the child component shows the updated name i.e cat, but this is not updated in the table. The table still shows "abc". After i click the ag grid cell next time it shows the updated value. is there a way to show the updated value without clicking on the cell again How should i achieve the above reactivity.

Answer 1

Try updating the whole array:

  updateClient(){
//  this.rowData[0].name = "cat"        delete this line

    const updatedRow = {...this.rowData[0], name: "cat"}
    this.rowData.splice(0, 1, updatedRow)
  }