parsley/app/javascript/components/AppConfirm.vue

<template>
  <app-modal :open="open" :title="message" @dismiss="runCancel">
    <div class="buttons">
      <button type="button" class="button is-primary" @click="runConfirm">OK</button>
      <button type="button" class="button" @click="runCancel">Cancel</button>
    </div>
  </app-modal>
</template>

<script setup>

const props = defineProps({
  cancel: {
    type: Function,
    required: true
  },

  confirm: {
    type: Function,
    required: true
  },

  message: {
    type: String,
    required: false,
    default: 'Are you sure?'
  },

  open: {
    type: Boolean,
    required: true
  }
});

function runConfirm() {
  props.confirm();
}

function runCancel() {
  props.cancel();
}

</script>