How to UNDO vue select?

Question

Vue.js

There is a task, when changing, selectask the user with the help of confirmwhether he really wants to change this value. The value itself is in vuex, through v-modeland computed get/setthe value changes. There is no setcheck with confirm, but when you cancel the changes , it still selectchanges, although the value in vuexremains the same. How can I make the undo functionality so that onInput selectit does not work?
codesandbox

<template>
  <div>
    Current real value: {{ selected }}
    <select v-model="selected" @input="onInput">
      <option v-for="(item, index) of list" :key="index" :value="item">{{ item }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "toster",

  data: () => ({
    vuex: 3,
    list: [1, 2, 3, 4, 5, 6]
  }),

  computed: {
    selected: {
      get() {
        return this.vuex;
      },
      set(value) {
        if (window.confirm("Realy change select?")) {
          this.vuex = value;
        }
      }
    }
  },

  methods: {
    onInput({ target: { value } }) {
      console.log("onInput", value);
    }
  }
};
</script>

Answer 1

<select ref="selectr" v-model="selected" @input="onInput(e)">
      <option v-for="(item, index) of list" :key="index" :value="item">{{ item }}</option>
</select>

selected: {
      get() {
        return this.vuex;
      },
      set(value) {
        if (window.confirm("Realy change select?")) {
          this.vuex = value;
        } else {
          this.$refs.selectr.value = this.vuex;
        }
      }
}