vue reverting data to prior state

Question

I have a JSON object that looks like this,

[
  {
    "column": {
      "name": "31_12_2021",
      "display_name": "31/12/2021",
      "default_value": "",
      "pk": true,
      "hidden": false,
      "data_type": "1"
    },
    "header_row": {
      "style": {}
    },
    "data_rows": [
      {
        "style": {}
      },
      {
        "style": {}
      }
    ]
  },
  {
    "column": {
      "name": "quick",
      "display_name": "quick",
      "default_value": "",
      "pk": false,
      "hidden": false,
      "data_type": "1"
    },
    "header_row": {
      "style": {}
    },
    "data_rows": [
      {
        "style": {}
      },
      {
        "style": {}
      }
    ]
  },
  {
    "column": {
      "name": "333",
      "display_name": "333",
      "default_value": "",
      "pk": false,
      "hidden": false,
      "data_type": "1"
    },
    "header_row": {
      "style": {}
    },
    "data_rows": [
      {
        "style": {}
      },
      {
        "style": {}
      }
    ]
  }
]

I am looping over this in my vue template to create a select menu,

<div v-for="(c, i) in columns" :key="i">
  <select v-model="c.column.data_type">
    <option value="1">Data Type 1</option>
    <option value="2">Data Type 2</option>
    <option value="3">Data Type 3</option>
    <option value="4">Data Type 4</option>
  </select>
</div>

By binding the select to the data_type every time I make a select change it updates the data for that object in my data/json. What I want to know is it possible to get the old value before it was changed?

I have tried to do something like,

watch: {
    columns: {
      deep: true,
      handler(newValue, oldValue) {
        //do some comparions here
     }
    }
}

But it appears that newValue and oldValue are the same?

Answer 1

As mentioned in the docs

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

One possible way of circumventing this challenge is to use @Shoejep's solution