The data of Vue's component cannot be change

Background:

I use socket.io-client in vue, the socket.io-client execute the event trigger by the socket-server and the change the data.
But in vue’s component, the data object’s tableData doesn’t have any data by Vue-dev-tool

###The code as beyond:

import io from 'socket.io-client'

export default {
  data () {
   return {
       isConnected: true,
       socketMessage: '',
       inputMessage: '',
      socket: io('localhost:2020'),
      tableData: []
   }
  },
  mounted () {
    let that = this
    this.socket.on('message', function (data) {
      console.log(that.tableData)
      that.tableData = [...that.tableData, data]
     console.log(that.tableData)
   })
 },
 methods: {
   async publishMessage () {
     if (this.inputMessage && this.isConnected) {
        this.socket.emit('new message', this.inputMessage)
     }
    this.inputMessage = ''
  }
 }
}

eng: the socket’s event is being triggered, and receive the response by the server.
中文: 浏览器端的socket 效应了事件 (message),并且获取到了服务器返回的数据。


But within the vue-dev-tool, tableData is still empty.
可是,通过 vue 调试工具,可以看到 tableData 就是空的。查看下图

try this

import io from 'socket.io-client'

export default {
  data: () => ({
    isConnected: true,
    socketMessage: '',
    inputMessage: '',
    socket: null, // Executing logic in the data block should be avoided. Use created().
    tableData: []
  }),
  mounted () {
    this.socket.on('message', data => {
      console.log(this.tableData)
      this.tableData = [...this.tableData, data]
      console.log(this.tableData)
   })
 },
 methods: {
   async publishMessage () {
     if (this.inputMessage && this.isConnected) {
        this.socket.emit('new message', this.inputMessage)
     }
    this.inputMessage = ''
  }
 },
 created() {
   this.socket = io('localhost:2020')
 }
}

It doesn’t work. After publish message successfully, tableData still be empty.

it is really weired. I create a new data’attribute - socketData, received socket’s callback. But in vue dev tool, it is still empty.