Not removed correctly assign value to another variable

Question

I have a table that needs to be editable. When editing a row, you can discard the changes or confirm.

I implemented it like this: when editing, I copy the table to another variable and, when canceled, I return the data from the new variable to the main variable with the table, but if I confirm the changes, then I simply reset the temporary variable.

But something goes wrong. When I click on change, the temporary variable is filled with the main table, but when I cancel, at the very beginning of the cancel function, the temporary table contains changes from the original table that should not be there.

I thought it was because of the ref , but without the ref the effect is the same. Where is the mistake ?

<template>
<q-table
  :rows-per-page-options="[150]"
  hide-bottom
  separator="cell"
>
  <template v-slot:header="props">
    <q-tr :props="props">
      <q-th>
        <q-btn @click="addAbonent">++</q-btn>
      </q-th>
      <q-th class="thclassification" v-for="column in columns" :key="column">{{column.name}}</q-th>
    </q-tr>
     <q-tr :props="props">
          <q-td/>
          <q-td class="tdclassification" v-for="imput in countInput" :key="imput" >
             <q-input
               v-model="textSearch"
                dense
                class="qinput">
                <template v-slot:prepend>
                  <q-icon name="search" />
                </template>
              </q-input>
          </q-td>
      </q-tr>
      <q-tr v-for="data in dataList" :key="data" :props="props">
          <q-td>
            <div v-if=!inputsStates[data.id]>
              <q-btn @click="editAbonent(data.id)">{{data.id}}</q-btn>
              <q-btn @click="removeAbonent(data.id)">-</q-btn>
            </div>
            <div v-if=inputsStates[data.id]>
              <q-btn @click="submitEdit(data.id)" >submit</q-btn>
              <q-btn @click="cancelEdit(data.id)" >cancel</q-btn>
            </div>
          </q-td>
          <q-td class="tdclassification"
            v-for="(dataItem) in columns"
            :key="dataItem"
          ><q-input
            dense
            borderless
            :readonly="!inputsStates[data.id]"
            v-model="data[dataItem.name]"
          ></q-input>
          </q-td>
      </q-tr>
  </template>
</q-table>

const dataList = ref([]) let temporaryArray = []

function editAbonent (id) {
  inputsStates[id] = !inputsStates[id]
  temporaryArray = dataList.value
}
function submitEdit (id) {
  temporaryArray = []
  inputsStates[id] = !inputsStates[id]
}
function cancelEdit (id) {
  dataList.value = temporaryArray
  inputsStates[id] = !inputsStates[id]
  temporaryArray = []
}

function removeAbonent (id) {
  dataList.value = dataList.value.filter(x => x.id !== id)
}