Javascript vue.js异步回调函数

我有一个模态组件，它只是这个窗口的一个奇特版本。确认一下，我通过插入插件使它可以在我的nuxt应用程序中的任何地方调用

组件/confirmModal.vue

<template>
  <transition name="fade">
    <div
      v-if="isShow"
      @click="handleClickOverlay"
      class="confirm-modal-overlay"
      id="swConfirm"
    >
      <transition name="zoom">
        <div v-if="isShow" ref="swConfirmDialog" class="confirm-modal-container">
          <span class="confirm-modal-text-grid">
            <h4 v-if="dialog.title" class="confirm-modal-title">{{ dialog.title }}</h4>
            <p v-if="dialog.message" class="confirm-modal-text">{{ dialog.message }}</p>
          </span>
          <div
            class="confirm-modal-btn-grid"
            :class="{ isMono: !dialog.button.no || !dialog.button.yes }"
          >
            <button
              v-if="dialog.button.no"
              @click.stop="e => handleClickButton(e, false)"
              class="confirm-modal-btn left"
            >
              {{ dialog.button.no }}
            </button>

            <button
              v-if="dialog.button.yes"
              @click.stop="e => handleClickButton(e, true)"
              class="confirm-modal-btn"
            >
              {{ dialog.button.yes }}
            </button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import { events } from '../plugins/confirm-modal'

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

const Component = {
  name: 'swConfirmDialog',
  data() {
    return {
      isShow: false,
      dialog: {
        title: '',
        message: '',
        button: {}
      },
      params: {}
    }
  },
  methods: {
    resetState() {
      this.dialog = {
        title: '',
        message: '',
        button: {},
        callback: () => {}
      }
    },
    handleClickButton({ target }, confirm) {
      if (target.id == 'swConfirm') return
      this.isShow = false
      if (this.params.callback) {
        this.params.callback(confirm)
      }
    },
    handleClickOverlay({ target }) {
      if (target.id == 'swConfirm') {
        this.isShow = false
        // callback
        if (this.params.callback) {
          this.params.callback(false)
        }
      }
    },
    open(params) {
      this.resetState()
      this.params = params
      this.isShow = true
      Object.entries(params).forEach(param => {
        if (typeof param[1] == typeof this.dialog[param[0]]) {
          this.dialog[param[0]] = param[1]
        }
      })
    },
    registerEvents() {
      events.$on('open', this.open)
      events.$on('close', () => {
        this.handleClickOverlay({ target: { id: 'swConfirm' } })
      })
    }
  },
  mounted() {
    this.registerEvents()
  }
}
export default Component
</script>

我在我的组件中调用它，就像下面的代码一样，但是因为我想在回调函数中执行异步函数，所以我不断得到错误

“语法错误：不能在异步函数外使用关键字'wait'”

---

只需将回调更改为异步

callback: async (confirm) => {
  if (confirm) {
    let res = await this.$auth.logout()      
  }
}

---

所以，让函数

异步
。我不知道解决方案这么简单。。。我是js异步的新手。我的第一次尝试是使组件函数异步，这也是我大部分时间使用的地方。谢谢你给我一个更简单的答案。
methods: {
    logout(){
      this.$confirm(
        {
          message: `confirm logout?`,
          button: {
            no: 'Cancel',
            yes: 'OK'
          },
          callback: confirm => {
            if (confirm) {
              let res = await this.$auth.logout()
            }
          }
        }
      )
    }
  }

callback: async (confirm) => {
  if (confirm) {
    let res = await this.$auth.logout()      
  }
}