In VueJS, the changes to the checkboxes were completed until OK/Cancel was issued using @change and confirm.
If Cancel is pressed here, I do not know how to cancel execution.
I wrote the following definition, but it is not reflected well.

methods: {
            unlock () {
                this.checkBoxTemp = Boolean (this.formData.locked);
                if (! confirm ('Do I want to change the lock status?')) {
                    console.log (this.checkBoxTemp);
                    this.formData.locked =! this.checkBoxTemp;
                }
            }
        }

Postscript: 2019/11/22 13:56

The current source code is as follows.

<template>
  
    <v-checkbox
      v-model = "formData.locked"
      label = "item lock"
      color = "default"
      @ change.stop = "unlock ()"
    ></v-checkbox>
  
</template>
<script>
    export default {
        name: "Pref",
        data () {
            return {
                dialog: true,
                checkBoxTemp: null,
                formData: [locked: true],
            }
        },
        methods: {
            unlock () {
                this.checkBoxTemp = Boolean (this.formData.locked);
                if (! confirm ('Do I want to change the lock status?')) {
                    console.log (this.checkBoxTemp);
                    this.formData.locked =! this.checkBoxTemp;
                }
            }
        }
    }
</script>

Expected behavior

When the item lock status changes, unlock () in the method is activated and a confirmation screen appears.
After that, when cancel is pressed, the operation is expected to return to the original state (the state before the change).