How to pass variable between vue.js components?

Question

Vue.js

There is a main app.vue template. Represents a header with a button and pull-up content from child components in router-view

<template>
  <div id="app">
        <CreateButton 
          :link = "createLink"/>
        <router-view class="text-center mt-12 container"></router-view> //здесь отображаются дочерние компоненты
  </div>
</template>

<script>
    import CreateButton from './components/includes/CreateButton'
    export default {
    name: 'App',
    components: {
      CreateButton
    },
    data() {
      return {
        createLink: 'UserCreate',
     }
    },
  }
</script>

As you can see, I'm including a link-component CreateButton, here it is:

<template>
  <router-link
    :to="{ name: link }"
    class="btn btn-success">+</router-link>
</template>
<script>
  export default {
    props: ['link']
  }
</script>

When I go to the child component (in fact, another page inside this one) I want to override createLink , from 'UserCreate' to, say, 'DeleteUser'
I tried to write in the child:

data() {
      return {
        createLink: 'DeleteUser',
     }
    },

But it doesn't work as expected.
Please tell me what needs to be done in order to be able to override createLink
in all components. I read about $emet, but it doesn’t seem right - I don’t have events ....

Answer 1

for simple buses - https://alligator.io/vuejs/global-event-bus/
Vuex - for the rest of the
PS
, the essence of events here is that in one component you listen to the event (changing the name of the link)
and in the other you initiate this event. Norm. works in conjunction father-son. If the nesting is greater (grandfather-dad-son) - then it is more difficult => Vuex