The problem of vue-router about subrouting pages passing data to components

problem description

the project writes the route in vue-router. Both the first-level route and the second-level route use the same sub-component. At present, the first-level route can transmit data to the sub-component, but when you click on the second-level route, the data of the first-level route is still displayed

related codes

routing code:

  // 
    {
      path: "/share",
      name: "share",
      component: share,
      children: [
        {
          path: "shareInfo", // 
          name:"shareInfo",
          component: shareInfo
        }
      ]
    },

first-level routing / share page:

<template lang="html">
  <div class="">
      <HeaderBar :headerBar="headerBar"/>
  </div>
</template>

<script>
import HeaderBar from "@/components/common/headerBar.vue"

export default {
  name:"Share",
  components: {
    HeaderBar,
  },
  data() {
    return {
      headerBar: {
        title: "",
        imgUrl: require("../../assets/images/doubt.png"),
        path: "shareInfo",
        params: {
        },
        goBack:true,
        showIcon:true
      }
    }
  }
}
</script>

<style lang="css">
</style>

Secondary routing / share/shareInfo page code:

<template lang="html">
  <div class="">
      <HeaderBar :headerBar="headerBar"/>
  </div>
</template>

<script>
import HeaderBar from "@/components/common/headerBar.vue"

export default {
  name:"ShareInfo",
  components: {
    HeaderBar,
  },
  data() {
    return {
      headerBar: {
        title: "",
        imgUrl: "",
        path: "",
        params: {
        },
        goBack:true,
        showIcon:false
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>

subcomponent headerBar code:

<template lang="html">
<div class="">
  <div class="header-bar">
    <div class="goBack" @click="goBack" v-if="headerBar.goBack">
      <img src="../../assets/images/goBack.png" alt="">
    </div>
    <div class="header-bar-title">
      {{headerBar.title}}
    </div>
    <router-link tag="div" :to="{ name: headerBar.path, params: headerBar.params }" class="header-bar-icon" v-if="headerBar.showIcon">
      <img :src="headerBar.imgUrl" alt="">
    </router-link>
  </div>
</div>
</template>

<script>
export default {
  name: "HeaderBar",
  data() {
    return {
      headerBar: this.$attrs.headerBar
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    }
  }
}
</script>

what result do you expect? What is the error message actually seen?

what I want to implement is the first-level route and the second-level route, each route displays its own title value, but so far the second-level route still shows the title, of the first-level route and the whole headerBar has not changed.