Socket IO не работает без обновления страницы - Vue JS

Question

Я установил чат между клиентом и сервером. Все в порядке, но страница чата должна обновляться, чтобы показывать последние сообщения. Я тестировал с использованием двух разных входов, но обновленная страница работает нормально, но другая не обновляется последними сообщениями.

Server.js

io.on('connection', (socket) => {
   console.log("---- client connected ----");

   // send messages on every event
   sendStatus = function (data) {
      socket.emit('messages', data);
   }

   // get messages from the server
   socket.on('send_message', function (data) {
      new Chat({
        user_id: data.user_id,
        message: data.message,
        date: data.date,
      }).save(function(err, chat_data){
        if (!err) {
            Chat.findOne({ _id: chat_data._id }).populate('user_id').exec(function (err, chat) {
                sendStatus(chat);
            })
        }
     });
   })

  // send messages on load
  Chat.find({}).populate('user_id').exec(function (err, chat) {
     console.log('chattttttttt', chat)
     socket.emit('onload_chat', chat);
  })
})

Client.vue

 mounted () {
    this.getUsers()

    this.$socket.on('messages', (data)=> {
      this.chats.push(data)
      console.log('on send message', data)
    });
},
beforeMount () {
    this.$socket.on('onload_chat', (data)=> {
      this.chats = data
    });
},