firebaseから値を取り出すときに気をつけるポイント

今日、vue.jsを書いていた躓いたポイントについてです。

v-htmlでscriptのインスタンスを取り出そうとしたのですが、思うように取り出すことができず。

tweetsの中で uid のあう tweet の content を取り出そうとしていて、このようなコードを書いていました。
tweetsはfirebaseに保存しています。

<template>
    <div>
        <div class="content" v-html="tweet.content"></div>
    </div>
</template>

<script>
import { db } from '../main';

export default {
    props: ['uid'],
    data(){
        return{
            tweet: {}
        }
    },

    firestore(){
        return{
            tweet: db.collection('tweets').where('uid', '==', this.$props.uid)
        }
    }
}
</script>

propsで持ってきたuid を使って contents と照合し、uidのあうものを表示させるというものです。

どこが違うかわかりますでしょうか。
firebaseで返ってきた値は配列で保持されているため、tweet.contentでは取り出すことができないんですね。
ですので、先ほどの

<div class="content" v-html="tweet.content"></div>

というテンプレート部分を、

<div class="content" v-html="tweet[0].content"></div>

に変更すると、tweetの配列1番目のcontentということで、中身を取り出すことができます。

また1つ学びました。