Vue 3 Delete Button

DeleteButton.vue

<template>
  <button type="button" @click="confirmDelete">
    {{ state.message }}
  </button>
</template>

<script>
  import { reactive } from 'vue'

  export default {
    setup(props, { emit }) {
      const state = reactive({
        isConfirming: false,
        message: 'Delete',
        timer: null,
      })

      const confirmDelete = () => {
        if (state.isConfirming) {
          clearTimeout(state.timer)
          resetState()
          emit('confirm')
        } else {
          state.isConfirming = true
          state.message = 'Click to confirm'
          state.timer = setTimeout(resetState, 5000)
        }
      }

      const resetState = () => {
        state.isConfirming = false
        state.message = 'Delete'
        state.timer = null
      }

      return {
        confirmDelete,
        resetState,
        state,
      }
    }
  }
</script>