Vue返回观察者和数组

Question

我目前正在私人聊天室工作。 我启动了两个浏览器，其中一个隐身 当我从浏览器窗口发送一条消息时，我会console.log chats数组，但这是一个vue观察者对象。 当我从浏览器窗口2发送消息时，console.log使用相同的聊天数组，但它告诉我这是一个数组 第一个浏览器窗口显示错误this.chats.push不是函数 第二个浏览器窗口接受该功能并保存消息，并将其添加到chats数组。

有人可以向我解释为什么这样做吗？ 只是好奇

<template>
    <div class="card card-default chat-box">
        <div class="card-header">
            <b :class="{'text-danger':isBlocked}">
                {{friend.first_name}}
                <span v-if="isBlocked">(Blocked)</span>
            </b>

            <!--      Close button      -->
            <a href="" @click.prevent="close">
                <font-awesome-icon icon="times" class="float-right"/>
            </a>
            <!--      Close button ends here      -->

            <!--       Options     -->
            <div class="dropdown float-right">
                <b-dropdown variant="link" no-caret toggle-class="text-decoration-none">
                    <template v-slot:button-content>
                        <font-awesome-icon icon="ellipsis-v"/>
                    </template>
                    <b-dropdown-item href="" @click.prevent="block" v-if="!isBlocked">Block</b-dropdown-item>
                    <b-dropdown-item href="" @click.prevent="unblock" v-if="isBlocked">Unblock</b-dropdown-item>
                    <b-dropdown-item href="" @click.prevent="clear">Clear</b-dropdown-item>
                    <b-dropdown-divider></b-dropdown-divider>
                    <b-dropdown-item active>Active action</b-dropdown-item>
                    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
                </b-dropdown>
            </div>
            <!--       Options Ends     -->
        </div>
        <div class="card-body" v-chat-scroll>
            <p class="card-text" :class="{'text-right': chat.type === false}" v-for="chat in chats" :key="chat.id">
                {{chat.message}}
            </p>
        </div>
        <form class="card-footer" @submit.prevent="send">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Write your message"
                       :disabled="isBlocked" v-model="message"
                >
            </div>
        </form>
    </div>
</template>

<script>
    import {faIcons} from "@fortawesome/free-solid-svg-icons";
    import {DropDownButtonPlugin} from "@syncfusion/ej2-vue-splitbuttons";

    Vue.use(DropDownButtonPlugin);

    export default {
        props: ['friend'],
        computed: {
            queen() {
                return faIcons;
            }
        },
        data() {
            return {
                chats: [],
                message: null,
                isBlocked: false
            }
        },
        methods: {
            send() {
                if (this.message) {
                    this.pushToChats(this.message);
                    axios.post('/dashboard/chats/messages/store', {
                        session_id: this.friend.session.id,
                        message: this.message,
                        to_user_id: this.friend.id
                    });
                    this.message = null;
                }
            },
            pushToChats(message) {
                // this.getAllMessages();
                console.log(this.chats);
                console.log(typeof this.chats);
                this.chats.push({message: message, type: false, send_at: 'Just Now'});
            },
            close() {
                this.$emit('close');
            },
            clear() {
                this.chats = [];
            },
            block() {
                this.isBlocked = true
            },
            unblock() {
                this.isBlocked = false;
            },
            getAllMessages() {
                axios.post(`/dashboard/chats/session/${this.friend.session.id}`)
                    .then(res => this.chats = res.data
                    );
            }
        },
        created() {
            this.getAllMessages();

            Echo.private(`Chat.${this.friend.session.id}`).listen('PrivateChatEvent', (e) => {
                this.chats.push({message: e.content, type: true, send_at: 'Just Now'})
            });
        },
        name: "MessageComponent"
    }
</script>

<style scoped>
    .chat-box {
        height: 400px;
    }

    .card-body {
        overflow-y: scroll
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>