firebase realtime databaseのデータをリアルタイムに画面に表示出来ない

Question

前提・実現したいこと

nuxt + firebase realtime databaseを利用して
dbのデータリアルタイムに更新しようとしています。

発生している問題・エラーメッセージ

1. 画面を初期表示したときにデータが取得出来てない. await ref.on でawaitしてるので順次処理される想定だが、後で取得が動いてしまう。
2. firebaseのdbを更新したら一応 ref.on() は動くのだが、dataを更新する方法が分からない

該当のソースコード

export default {
  data: () => ({
    meetings: []
  }),
  async asyncData() {
    var result
    console.log("step1")
    const ref = await firebase.database().ref('meetings')
    await ref.on("value",async (data) => {
        const value = await data.val()
        console.log("get data")
        console.log(value)       
        result = value
    })

    console.log("step2")
    console.log(result)
    return {meetings: result}
  }
}

実行結果

step1
step2 parent
undefined
get data
{~~~~data~~~~}

試したこと

ref.on の所をreturnしてみたが、得られる結果が関数っぽいものが返ってきます

result = await ref.on("value",async (data) => {
        const value = await data.val()
        console.log("get data")
        console.log(value)       
        return value
    })
console.log(result)

実行結果

step1
step2 parent
ƒ (_x) {
                  return _ref.apply(this, arguments);
                }
get data
{~~~~data~~~~}

他にもsetter的なMethodを作りref.on()の中から呼ぼうとしたのですが、
undefined methodとなってしまい期待する結果とはなりませんでした。