如何保持等待Vue，直到从firebase获取数据？

<template>
  <div>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <!-- 显示从Firebase获取到的数据 -->
      <div v-for="item in data" :key="item.id">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/database';

export default {
  data() {
    return {
      loading: true,
      data: null
    };
  },
  created() {
    // 创建一个Promise对象
    const promise = new Promise((resolve, reject) => {
      // 执行Firebase的数据获取操作
      firebase.database().ref('data').once('value')
        .then(snapshot => {
          // 获取到数据后，将数据赋值给Vue组件的数据属性
          this.data = snapshot.val();
          resolve();
        })
        .catch(error => {
          reject(error);
        });
    });

    // 等待Promise对象的状态变为resolved，即数据获取完成
    promise.then(() => {
      this.loading = false;
    });
  }
};
</script>