Как заставить мой объект данных быть глубоко реактивным?

Question

Я создаю приложение на форуме, с категориями, темами и сообщениями. К каждому потоку прикреплен user_id, и я получаю пользователя с помощью firebase. Затем я обновляю this.thread.user с данным документом. Однако свойство user не является реактивным. Я приложил наблюдателя, чтобы попытаться решить проблему, но это не сработало. Мой код выглядит следующим образом:

<template>
    <div class="container">
        <h1 class="display-3" v-if="thread">Thread: {{ thread.title }}</h1>
        <small v-if="thread && thread.user">Created by <span class="font-weight-bold">{{ thread.user.displayName }}</span></small> // doesnt work
        <hr>
        <div class="alert alert-success" v-if="thread">
            {{ thread.body }}
        </div>

        <div v-for="(post, index) in posts"
             :key="index"
             class="alert alert-secondary">
            {{ post.body }}
        </div>
    </div>
</template>

<script>
    import db from '../firebase/init';
    export default {
        name: "Thread",
        props: ['app'],
        data() {
            return {
                thread: null,
                posts: [],
                user: null
            }
        },
        mounted() {
            this.getThread();
        },
        watch: {
            thread: {
                deep: true,
                handler(data) {
                    this.thread.user = data.user;
                }
            }
        },
        methods: {
            getThread() {
                db.collection('threads').doc(this.$route.params.id).get().then(doc => {
                    if (!doc.exists) {
                        this.$router.push('/');
                        return;
                    }
                    this.thread = {id: doc.id, ...doc.data()};
                    const ref = db.collection('profiles');
                    ref.where('user_id', '==', this.thread.user_id).get().then(snapshot => {
                        snapshot.forEach(doc => {
                            this.thread.user = {
                                id: doc.id,
                                ...doc.data()
                            } //doesnt work
                        })
                    })
                })
            },
            getPosts() {
                const ref = db.collection('posts');
                ref.where('thread_id', '==', this.thread.id).get().then(snapshot => {
                    snapshot.forEach(doc => {
                        this.posts.push({id: doc.id, ...doc.data()});
                    })
                })
            }
        }
    }
</script>