js的WebSocket的onmessage方法遇到jquery的奇怪现象

Question

目的是不断读取后台tomcat的日志，为了性能，jquery对象提早用全局变量记录好了。

但是发觉在onmessage方法里，操作该对象，F12调试里看到div的html内容都正常，但是界面没有实际效果。

非要直接写jquery对象才可以，用不了全局的定义。

请大伙直接看注释部分↓

<div id="app">

    <div id="log-container" style="height: 650px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">

        <div>

        </div>

    </div>

</div>

<script>

    let a=1;

    let $div = $("#log-container div").eq(0);

    let $container = $("#log-container");

    let vm = new Vue({

        el: '#app',

        data: {

            ws: null,

            webHost: window.location.host

        },

        created() {

            this.ws = new WebSocket('ws://' + this.webHost + '/log');

            $div.append('1'); // 成功

            this.ws.onmessage = function (event) {

                ++a; // 成功

                $div.html(a); // 无效果

                $container.scrollTop($div.height() - $container.height()); // 成功

            };

            this.ws.onerror = function (evt) {

                alert("出错啦");

            };

        },

        methods: {}

    });

</script>