How to connect Vue and application logic?

Question

JavaScript

Greetings. There is a simple question, but it prevents you from moving forward in working on the application. I am doing a group chat with rooms on webrtc as part of the training.
The meaning is this. There are 2 variables in a vacuum.

// ид пользователя, просто string переменная
var userId = "";
// переменная для хранения списка комнат, к которым можно подключиться
var roomsList = [];

Next, there is code for communicating with the server via api with asynchronous and callbacks, for example:

serverConnect({
  serverUrl: "ws://127.0.0.1:0001",
  success(plugin) {
    plugin.connect({
      success() {
        userId = generateUserIdString();
        plugin.send({"message": "getRoomsList"});
      },
      onmessage(msg) {
        if(msg.type == "gotRoomsList") {
          roomsList = msg.roomsList;
        }
      },
    });
  },
});

And there is Vue and html code that is responsible for the interface.

var app = Vue.createApp({
    data() {
        return {
            userId: "",
            roomsList: [],
        };
    },
}).mount("#app");

<div id="app">
    <div>{{ userId }}</div>
    <div>
        <ul>
            <li v-for="room in roomsList">{{ room.name }}</li>
        </ul>
    </div>
</div>

And, in fact, the question is how to organize these parts so that the userId and roomsList variables can be updated both from the interface and from the code?

Answer 1

Vuex