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

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列が空欄になってしまいました…

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