vue：怎样监听数据变化，并更新到data中totalMessage

Question

   
如下代码，该组件加载时通过 ws.onmessage = function(res) {let received_msg = res.data;}来监听websocket服务端发过来的数据，每当服务端发送一条数据，received_msg就会获取这条数据内容。
现在我想将received_msg压入到data中的totalMessage数组中，服务端发一条数据来，就自动往totalMessage中压入一条。我主要是不知道如何在export default外部操作export default {data{}}这里面data的数据。

<script> import { mapState, mapMutations } from 'vuex'; let websocket
= (function() {
    if ("WebSocket" in window) {
        var ws = new WebSocket("ws://localhost:3333");
        ws.onopen = function(e) {
            console.log('websocket连接成功。。');
        }
        ws.onmessage = function(res) {
            let received_msg = res.data;
            console.log("您收到一条消息：" + received_msg);
        };
    } else {
        alert("您的浏览器不支持 WebSocket!");
        return
    }
    let sendMessage = (message) => {    //发送消息
        ws.send(message);
    }
    let closeCunstomer = () => {
        ws.onclose = function() {
            alert("连接已关闭...");
        };
    }
    return {
        sendMessage,
        closeCunstomer,
    } })()

export default {
    data() {
        return {
            value: '',
            totalMessage: [],
        }
    },
    computed: {
        ...mapState(["customerShow"]),
    },
    methods: {
        ...mapMutations([
            'openCustomer', 'closeCustomer'
        ]),
        sendMessage() {
            websocket.sendMessage(this.value);
            this.totalMessage.push({ text: this.value, right: true });  
            this.value = '';
        },
        closeWebsocket() {
            console.log('websocket通信已被关闭')
            websocket.closeCunstomer()
        }
    } } </script>

Answer 1

为什么要在外边写一个自执行函数？把ws写在created或者mounted里不行吗？