How to change the token in vue-socket.io-extended on an established connection?

Question

Socket.io

I use Nuxt.js, I connect the following code through the plugin:

import Vue from 'vue'
import VueSocketio from 'vue-socket.io-extended'
import socketio from 'socket.io-client'

export default ({app, store, nuxtState, req, route}) => {

  let socket = socketio('http://localhost:5003', {
    autoConnect: false,
    transports:['websocket'],
    query: {
      token: store.getters['auth/userHash']
    },
  });

  Vue.use(VueSocketio, socket);

  socket.open();

  socket.on('connect', () => {
    store.dispatch('rooms/socketConnectUpdate', true);
  });

  socket.on('disconnect', () => {
    store.dispatch('rooms/socketConnectUpdate', false);
  });
}

The connection is established, but then the user can press the authentication button through VK, and accordingly, you need to close the old connection and open a new one with a new token. In a Vue component, I have a watcher that listens for vuex changes, and fires when the token is updated. When this happens I try to refresh the token in this way

this.$socket.io.disconnect();
          this.$socket.query = `token=${newVal}`;
          this.$socket.io.connect();

but a connection is established with the old token, why and how to fix it?

Answer 1

this.$socket.disconnect();
          this.$socket.query = `token=${newVal}`;
          this.$socket.io.opts.query = `token=${newVal}`;
          this.$socket.open();

this is how it works

Answer 2

this.$socket.io.opts.query = { 
  token: newVal
};
this.$socket.io.connect();