How to get up-to-date data from the server in one component if it changes in another?

Question

Vue.js

Hey!
I want to implement a very simple thing:
CRUD for managing the list of city (id, name)
CRUD for managing the list of metro stations (id, name, city_id)
At the same time, adding and changing elements occurs in the list component in a pop-up window.
How I did it:
In the citiesList vue component, the following methods are implemented:
getCities() - gets a list of cities from the server
addCity() and updateCity() - add and change, respectively.
There are no problems with this component at the moment.
Vue-component metroStationsList:
This component, among other things, has methods
getStations() - to get a list of stations from the server.
getCities() - to get all cities. They are needed here in order to display a select with a list of cities in the add / change form.
Create() calls both of these methods.
Problem:
Going to the "Metro" page. We received a list of cities from the server, which is displayed in the add / change forms.
Next, go to the "Cities" page, add a city.
We return to the "Metro" page and there is no new city in the list of cities (because the list of cities was pulled up from the server on the first visit and this component does not know anything about the new city).
How to solve this problem? Use vue? But if so, then it turns out that in vuex you need to store any data that is "reference books" - cities, subways, statuses of different entities, etc.

Answer 1

Yes, vuex will be quite appropriate, for you it will be the source of truth, from where all components will take data. Make two vuex modules - cities and stations - implement the corresponding crud operations in them. Components will take / transfer the necessary data from them.

Answer 2

Switch to sockets? Make a plugin for Vuex. It is possible without sockets if you have another change subscription mechanism. On sockets+Vuex it looks something like this:

socket.on("update_something", data => store.commit("something/update", data));