在 Vue 组件中使用 async/await 关键字，仍然返回[object Promise]

在Vue组件中使用`async/await`关键字时，如果该函数返回一个Promise，那么在Vue模板中直接使用该函数会返回`[object Promise]`。这是因为Vue模板只能处理同步函数返回的数据，无法处理异步函数返回的Promise对象。

解决办法有两种：

1. 使用`v-if`指令等待异步函数执行完毕再渲染模板：

   <template>
     <div>
       <div v-if="data">{{ data }}</div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         data: null
       }
     },
     async mounted() {
       this.data = await fetchData()
     },
     async methods: {
       fetchData() {
         // 异步函数
       }
     }
   }
   </script>

2. 在Vue组件中使用`computed`或`watch`监听异步函数返回的Promise对象，并在回调函数中更新数据：

   <template>
     <div>{{ data }}</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         promiseData: null,
         data: null
       }
     },
     computed: {
       async computedData() {
         this.promiseData = fetchData()
         return await this.promiseData
       }
     },
     watch: {
       async promiseData() {
         this.data = await this.promiseData
       }
     },
     async mounted() {
       this.data = await fetchData()
     },
     async methods: {
       fetchData() {
         // 异步函数
       }
     }
   }
   </script>

以上两种解决方法都是使用了`async/await`关键字，但是第二种方法更适用于需要监听异步函数返回的多个Promise对象的情况。