Creating a reactive object - best practice?

I’m having a small ionic vue menu component which is visible all the time, so there are no “…Enter” etc. events to collect data.
Problem is to display the user name in the menu component, when the user has logged in and the db returned its data.
User data is stored in a userStore.user object which is async updated.

In the menu component, I created

  <ion-label>Logged in: {{ user.name }}</ion-label>

</template>

    setup() {
      const user = ref(userStore.user);

Updating the user object in the userStore does not affect the user ref and doesn’t trigger an menu update.
Further Vue reading explained that ref() is making a copy of the given object and creates a reactive object from it.
If I change user.name the name gets updated correctly. Okay. But userStore gets updated in the background.
My idea is to create a menu component function like updateUser() which sets user.name = userStore.user.name;
This function is triggered by an event of an event framework like tiny-emitter, and the event is fired in the userStore upon updating the user data.
I’m not sure, whats the right strategy here to get the menu updated?

Might be worth utilizing some state library like vuex or pinia in this case. Point is that while you could wire this up your self with your own code, a library will at least give you the common blocks needed.

So something like this would a matter of

you change the data at one point…

  • The state machine reactes to that change
  • you process it however it’s needed
  • it emits that to all the components that have “subscribed” to the state.