asyncの戻り値Promiseを表示させる方法

Question

Vue.3(Typescript)で実装しています。
関数で、async/awaitを使用して値を取得しているのですが、取得された値を表示できずに困っています。
returnがPromiseになっており、その扱いがうまくできていないような気がします。

このような表があり、内容に関数で取得したluggages情報を表示したいと思っています。
しかし、
内容列は

<p v-for="luggage in getLuggages(item.orderId)">
    {{luggage}}
</p>

ですが空っぽに、
test列は{{ getLuggages(item.orderId) }}ですがObjectPromiseになってしまっています。

コード

■list.vue

<template>
  <table>
    <thead>
      <tr>       
        <th>内容</th>
        <th>test</th>        
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">        
        <td>
          <p v-for="luggage in getLuggages(item.orderId)">
            {{luggage}}
          </p>
        </td>
        <td>
          {{ getLuggages(item.orderId) }}
        </td>        
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">

const getLuggages = async (id) => {
  
  const res = await fetchOrderFromId(id) // ★fetchOrderFromIdは定義している関数です。
  console.log("getLuggages:")
  console.log(res.luggages)
  console.log(res.luggages.length)

  let luggages = []
  
  for (let i = 0; i <= res.luggages.length - 1; i++) {
    console.log(res.luggages[i].luggage.name)
    luggages.push(res.luggages[i].luggage.name)
  }
  console.log(luggages)
  
  return luggages
}

</script>

console.log(luggages)ではうまく配列になっていますが、templateタグでは表示されません。。

試したこと

getLuggages関数の戻り値がpromiseになっているので、thenを使ってみました。

const getLuggages2 = (id) => {
  getLuggages(id).then((data) => {
    return data
  })
}

試しに、を追加し、Templateのtest列を{{ getLuggages2(item.orderId) }}にしてみましたら、
test列が空欄になってしまいました…

アドバイスいただけますと幸いです。

Answer 1

returnだとうまくいかないので、取り急ぎ、外に格納用の変数const orderluggages = ref([])を作成し、
returnではなく、orderluggages.value = luggages　のように代入で対応しました。

他によい方法あれば是非お願いします。