Updating a component based on the actions in another component

Question

I have a profile page, where one can edit name+profile picture. I have a mainlayout (just like in the basic vaadin example) which displays these two (classes Text, Image) based on the user profile.

When changes are made on the profile page (to the UserProfile), how can I trigger an update in mainlayout?

I don't need any component based events like click, or an event source, I just need to tell the MainLayout class to refresh itself based on the UserProfile.

I tried SpringBoot events (they don't work) I tried using the Vaadin events based on the documentation, but I don't see a relation to my problem anymore after reading that.

Code:

  MainLayout.java
     private Footer createFooter() {
        Footer layout = new Footer();

        Optional<Models.UserProfile> maybeUser = authenticatedUserHolder.getProfileUser();

        if (maybeUser.isPresent()) {
            Models.UserProfile userProfile = maybeUser.get();

            //this needs to update when the UserProfile changes in the other component
            avatar = new Avatar(userProfile.getName());
            Util.setImageFromProfile(userProfile, avatar);
             ...

            MenuBar userMenu = new MenuBar();
            //this needs to update too when the UserProfile changes 
            userNameText = new Text(userProfile.getName());
            footerDiv.add(userNameText);
    

    UserProfilePage.java
     TextField name = new TextField("Your name");
        name.setValue(profile.getName()!=null ? profile.getName() : "");
      ...
        name.addBlurListener(e -> {
            log.info("Name: {}", name.getValue());
            profile.setName(name.getValue());
            userService.update(profile);
            // AND HERE I NEED TO DO SOMETHING? SO THAT THE MainLayout fields change, thank you
        });