How to update one router-view on change in another router-view?

Question

Vue.js

There is a component (user profile) containing two router-views with unique names. In one router-view, you can add roles to the user, in another, you can view the list of roles with rights
How to make it so that adding a role in the first router-view updates the information in the second router-view?

<template>
      <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="wrap-role">
                            <h3>Список ролей</h3>
                        </div>
                        <router-view name="roles" />
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <h3>Список прав пользователя</h3>
                        <router-view name="regulations" />
                    </div>
                </div>
            </div>
        </div>
</template>

Answer 1

beforeEnter?