Access and modify JSON property using v-model on VUE JS

Question

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

The JSON

[
   {
      "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
               }
            ]
         },
      ]
   },
]

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

<v-expansion-panels multiple focusable popout class="py-5">
    <v-expansion-panel class="expandable" v-for="(establishment, establishmentIndex) in establishments">
        <v-expansion-panel-header class="exp_estb">
        </v-expansion-panel-header>
        <v-expansion-panel-content class="ma-0 pa-0">
            <v-row no-gutters>
                <v-col cols="12">
                    <form>
                        <v-simple-table>
                            <template>
                                <thead>
                                    <tr>
                                        <th scope="col">ESTABLECIMIENTO</th>
                                        <th v-for="(operation, index) in operations" scope="col">
                                            {{ operation.description }}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(capa, capaIndex) in capas">
                                        <td>{{capa.name}}</td>
                                        <td v-for="(operation, operationIndex) in operations">
                                            <span>{{ operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value }}</span>
                                            <v-row class="pr-5">
                                                <v-col cols="12" class="mr-2 pr-5">
                                                    <v-text-field v-model="operation_data[establishmentIndex].values[capaIndex].operations[operationIndex].value" label="" color="#7F53DD"></v-text-field>
                                                </v-col>
                                            </v-row>
                                        </td>
                                    </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </form>
                </v-col>
            </v-row>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>

Computed

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 => operationsWithContent.push({ operation_id:operation.id, value: 0 }))
            capas.forEach(capa => capasWithOperations.push({ capa_id:capa.id, operations:operationsWithContent }))
            establishments.forEach( establishment => operation_data.push({ id:establishment.id, values:capasWithOperations}) )

            return operation_data
        }
    },

Answer 1

Is there a specific reason you need a computed here? It seems more logical to fetch your data using a method and saving that result in a variable. Then you can assign the variable to the v-model like you already did in your example and it should work out of the box.

data() {
  return {
    operation_data: null
  }
},
mounted() {
  this.fetchData();
},
methods: {
  fetchData() {
    // Get your data here with axios
    this.operation_data = resultOfAxios;
  }
}

For your question on why the data doesn't reflect back:
A computed is initially just a getter. You have to manually add a setter for the computed for it to be able to update data.