● Vue3 の ＜script setup＞ 構文直下 で await できません

＜script setup＞ 構文 では await で非同期関数を待つことはできません。 以下のようにして非同期関数を待つようにします

元のコード(エラーで動作しない)

<template>
  <div>
    <h1>MySetupComponent</h1>
    <div>{{ result }}</div>
  </div>
</template>

<script lang="ts" setup>
// 非同期関数
const getMessageAsync = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return '1秒たちました!！！'
}

// result に取得した値をセットする
const result = ref('')
const message = await getMessageAsync()  // ### エラーで動作しない
result.value = message
</script>

● A. async なアロー関数を使う

<script lang="ts" setup>
import { ref } from 'vue'

// 非同期関数
const getMessageAsync = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return '1秒たちました!！！'
}

// result に取得した値をセットする
const result = ref('')
const getResultAsync = async () => {
  const message = await getMessageAsync()
  result.value = message
}
getResultAsync()
</script>

● B. async な即時関数を使う

<script lang="ts" setup>
import { ref } from 'vue'

// 非同期関数
const getMessageAsync = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return '1秒たちました!！！'
}

// result に取得した値をセットする
const result = ref('')

// 即時関数
;(async function () {
  const message = await getMessageAsync()
  result.value = message
})()
</script>

● C. setup なしの ＜script＞に書き換える

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'

// 非同期関数
const getMessageAsync = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return '1秒たちました!！！'
}

export default defineComponent({
  setup() {
    // result に取得した値をセットする
    const result = ref('')
    onMounted(async () => {
      const message = await getMessageAsync()
      result.value = message
    })

    return {
      result
    }
  }
})
</script>