vue如何再页面渲染websocket请求得到的数据

data(){
    return:{
        marketTrades:[],
    }
},
mounted(){
    this.someThing();
},
methods:{
    someThing(){
        const websocketId = String(this.optionValue);
        const ws = new WebSocket("ws://192.168.8.8888:8888/message");
        
        ws.onopen = function () {
           const  from={"req":"sub","channel":"market.all","market":websocketId}
           ws.send(JSON.stringify(from));
        };
        
        ws.onmessage = function (evt) {
              const result= evt.data;
              const data = JSON.parse(event.data)
              
            this.marketTrades = data.data['market.trades'];//实时成交数据
              
            console.log(this.marketTrades);//实时成交数据,这里能正确返回需要的数据
        };
    }
    
}

在websocket里面能正确打印出‘实时成交数据’，但是要把数据渲染到界面中的时候，这个this.marketTrades是空。
我在网上查过，说是数据的作用域不同，但是还是找不到解决方法

请问下这种应该怎么去正确渲染呢