Свойства объекта Vue.js «скрыты» после назначения

Question

Я могу получить данные из базы данных Firebase, но когда я пытаюсь назначить извлеченные данные из базы данных, свойства объекта требуют, чтобы вы вызвали метод получения (я имею в виду, что я не могу получить к ним доступ после назначения)

Это экземпляр Vue.

Да, я знаю. Это странно отформатировано, это то, что VS Code делает для меня ...

export default {
    name: "Home",
    data() {
        return {
            users: []
        };
    },
    created() {
        db.collection("users")
            .get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    let user = doc.data();
                    user.id = doc.id;
                    this.users.push(user);
                    console.log(this.users);
                });
            });
    }
};

Когда я открываю консоль, мне нужно нажать на три точки, чтобы получить фактические данные.

Answer 1

Следующее должно сделать трюк:

export default {
    name: "Home",
    data() {
        return {
            users: []
        };
    },
    created() {
        db.collection("users")
            .get()
            .then(snapshot => {
                let usersArray = [];
                snapshot.forEach(doc => {
                    let user = doc.data();
                    user.id = doc.id;
                    usersArray.push(user);
                });
                this.users = usersArray;
                console.log(this.users);
            });
    }
};