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>