How to fix reactivity?

Question

Vue.js

Template Part

<div v-for="({ id, cells }, indexRow) of rows" :key="id" class="table__row">
          <div class="table__row-cells" :class="classRowCells">
            <Cell
              v-for="(cell, indexCell) of cells"
              :key="cell.id"
              :data="cell"
              class="table__cell"
              :step="step"
              :maxMinutes="maxMinutes"
              @change="editCell({ indexCell, indexRow, value: $event })"
            />
            <div class="table__cell">
              <BtnIcon iconMaterial="clear" class="table__btn-delete" @click="deleteRow(id)" />
            </div>
          </div>
          <RowCreator class="table__add-row" @add="addRow(indexRow + 1)" />
        </div>

model: {
      prop: 'data',
      event: EVENT_MODEL,
    },

    props: {
      data: {
        type: Array,
        required: true,
      },
    },

    computed: {
      rows() {
        return GradientTableAdapter.toRows(this.data, this.fractionsCount);
      },
    },

    methods: {
      setData(data) {
        this.$emit(EVENT_MODEL, data);
      },
      editCell({indexRow, indexCell, value}) {
        const rows = [...this.rows];
        rows[indexRow].cells[indexCell] = {
          ...rows[indexRow].cells[indexCell],
          value: Number(value),
        };

        const data = GradientTableAdapter.fromRows(rows);
        this.setData(data);
      },
    }

Please tell me how to solve the problem. Rows is a computed property dependent on v-model. Cell contains an input inside, when it changes, an event fires. In editCell I change the data and send an event to change the model. This component responds correctly to model changes, but the problem is that the view does not see the data change inside the cell. Although the value of the input in the data has changed.

One solution is to change the cell id every time. But then the problem arises that focus disappears from the input