title: Access and modify JSON property using v-model on VUE JS
body: <p>I generate a JSON with a lot of nested data, one of those properties called 'value' inside 'operations' is used in the v-model of every input of a dynamic generated html table. Initially that property is set to 0 and the input is set with that value but when I change the value in the input it doesn't reflect in the json</p>
  
  <p>The JSON</p>
  
  <pre><code>[
     {
        "establishment_id":1,
        "values":[
           {
              "capa_id":"A",
              "operations":[
                 {
                    "operation_id":1,
                    "value":0
                 },
                 {
                    "operation_id":2,
                    "value":0
                 },
                 {
                    "operation_id":3,
                    "value":0
                 },
                 {
                    "operation_id":4,
                    "value":0
                 }
              ]
           },
           {
              "capa_id":"B",
              "operations":[
                 {
                    "operation_id":1,
                    "value":0
                 },
                 {
                    "operation_id":2,
                    "value":0
                 },
                 {
                    "operation_id":3,
                    "value":0
                 },
                 {
                    "operation_id":4,
                    "value":0
                 }
              ]
           },
           {
              "capa_id":"C",
              "operations":[
                 {
                    "operation_id":1,
                    "value":0
                 },
                 {
                    "operation_id":2,
                    "value":0
                 },
                 {
                    "operation_id":3,
                    "value":0
                 },
                 {
                    "operation_id":4,
                    "value":0
                 }
              ]
           },
        ]
     },
  ]
  </code></pre>
  
  <p>The component
  Establishments, Operations and CAPA are objects taken from an API via Axios, those data are used to generate the table and the json for the input data</p>
  
  <pre><code>&lt;v-expansion-panels multiple focusable popout class="py-5"&gt;
      &lt;v-expansion-panel class="expandable" v-for="(establishment, establishmentIndex) in establishments"&gt;
          &lt;v-expansion-panel-header class="exp_estb"&gt;
          &lt;/v-expansion-panel-header&gt;
          &lt;v-expansion-panel-content class="ma-0 pa-0"&gt;
              &lt;v-row no-gutters&gt;
                  &lt;v-col cols="12"&gt;
                      &lt;form&gt;
                          &lt;v-simple-table&gt;
                              &lt;template&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th scope="col"&gt;ESTABLECIMIENTO&lt;/th&gt;
                                          &lt;th v-for="(operation, index) in operations" scope="col"&gt;
                                              {{ operation.description }}
                                          &lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
                                      &lt;tr v-for="(capa, capaIndex) in capas"&gt;
                                          &lt;td&gt;{{capa.name}}&lt;/td&gt;
                                          &lt;td v-for="(operation, operationIndex) in operations"&gt;
                                              &lt;span&gt;{{ operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value }}&lt;/span&gt;
                                              &lt;v-row class="pr-5"&gt;
                                                  &lt;v-col cols="12" class="mr-2 pr-5"&gt;
                                                      &lt;v-text-field v-model="operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value" label="" color="#7F53DD"&gt;&lt;/v-text-field&gt;
                                                  &lt;/v-col&gt;
                                              &lt;/v-row&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/tbody&gt;
                              &lt;/template&gt;
                          &lt;/v-simple-table&gt;
                      &lt;/form&gt;
                  &lt;/v-col&gt;
              &lt;/v-row&gt;
          &lt;/v-expansion-panel-content&gt;
      &lt;/v-expansion-panel&gt;
  &lt;/v-expansion-panels&gt;
  </code></pre>
  
  <p>Computed</p>
  
  <pre><code>computed:
      {
          operation_data: function()
          {
              let operation_data=[]
              let operationsWithContent=[]
              let capasWithOperations=[]
  
              var establishments = Object.values(this.establishments)
              var capas = Object.values(this.capas)
              var operations = Object.values(this.operations)
  
              operations.forEach(operation =&gt; operationsWithContent.push({ operation_id:operation.id, value: 0 }))
              capas.forEach(capa =&gt; capasWithOperations.push({ capa_id:capa.id, operations:operationsWithContent }))
              establishments.forEach( establishment =&gt; operation_data.push({ id:establishment.id, values:capasWithOperations}) )
  
              return operation_data
          }
      },
  </code></pre>