Child route to change a view of its parent

Hey,
I have a parent view where I display a list and some metadata in a right pane, and I want to replace the right pane component to show a specific item data, when I click on it on the list:

export default {
  mode: 'history'
  base: process.env.BASE_URL,
  routes: [
    { 
       path: "/list", 
       name: "list", 
       components:  {
         mainView: () => import("@/views/ListView"),
         rightPane: () => import("@/views/ListMetadata")
      },
     children: [
       {
         path: ":itemId"
         name: "item"
         components: {
           rightPane: () => import("@/views/ItemData")
         }
       }
     ]
    }
  ]
}

My template looks like:

<template>
  <div id="app">
    <div id="content">
      <div id="rightPane">
        <router-view name="rightPane"></router-view>
      </div>
      <router-view name="mainView"></router-view>
    </div>
  </div>
</template>

So, when I move from “list” to “item”, I would expect the right pane to change from ListMetadata to ItemData. But in reality, the ItemData is not loaded, I guess it’s because the child route “doesn’t” know its parent view.
I put the “item” route as a “list” child, as it makes sense to me, because the main view it kept, and the path is just extended with a specific ID.

Am I right? can you suggest a way to achieve it?

You can use eventbus or vuex for this.

With vuex it’s quite easy to do parent/child communication.

Actually I’m using Vuex to have the same object in both views. But I want to access the same router-view now from both (child & parent) route.