title: Vue component does not show updated data even if prop data is changed
body: <p>This is my parent component <code>abc.vue</code></p>
  
  <pre><code>&lt;v-card outlined class="mt-4"&gt;
          &lt;DetailsTable v-show="toggleClientData" :columnDefs="columnDefs" :rowData="rowData" /&gt;
  &lt;/v-card&gt;
  </code></pre>
  
  <pre><code>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"
   }
  }
  </code></pre>
  
  <p>Now this is my child component <code>DetailsTable.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;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]"
    &gt;&lt;/ag-grid-vue&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; {
        return `${params.value.trim()},`;
      };
    }
  };
  &lt;/script&gt;
  
  &lt;style lang="sass" scoped&gt;
  @import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css"
  @import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>