Change Property Before Window.confirm()

Here is my code below:

<a
  @click="destroy"
  :class="['button', { 'is-loading': deleting }]"
>
  Delete
</a>

data: () => ({
  deleting: false
}),
destroy () {
  this.deleting = true

  if (!confirm('Sure?') {
    this.deleting = false
    return
  }
}

As a result a modal dialog displays and this.deleting is not true :/

Is it possible to change deleting property before dialog?

It seems like the UI hasn't updated by the time the confirmation dialog appears. You could delay the confirmation dialog a bit using setTimeout(func, 0) to ensure that the UI has updated.

It should be something similar to:

destroy () {
  this.deleting = true

  // Store reference to `this` for access during callback.
  var self = this;

  setTimeout(function() {
      if (!confirm('Sure?') {
        // self - refers to `this` in the outer context.
        self.deleting = false
        return
      }
  }, 0);
}

OR

destroy () {
  this.deleting = true

  setTimeout(() => {
      if (!confirm('Sure?') {
        this.deleting = false
        return
      }
  }, 0);
}

requestAnimationFrame might also be a good alternative.

See: How to tell when a dynamically created element has rendered

Note: I haven't tested this, because you don't have an MCVE in the question.