If you need to manage state in your Vue applications, check out Vuex.

Vuex serves as a centralized store for all your data, making it easier to handle and access across components.

Be sure to explore their documentation for guidance on implementing Vuex effectively.

In order to the component B, you can inherit props from its parent component. These props are open to being modified by the parent component. B could be viewed as a simplistic component that only displays what it is instructed to display by its parent. For instance:

// Taking Component A as an example
<template>
   <div id="app">
      <p v-on:click="test ()">Something</p>
      <b data="myData" isActive="myIsActive"></b>
   </div>
</template>

<script>
import B from '../components/B.vue';
export default {
  components: {
    B
  },
  data() {
    return {
      myData: 0,
      myIsActive: false,
    };
  },
  methods: {
    test: function() {
      this.myData = 123
      this.myIsActive = true
    }
  }
}
</script>

// As for Component B
<template>
  <div>{{ data }}{{ isActive }}</div>
</template>

<script>
export default {
  props: {
    data: Number,
    isActive: Boolean
};
</script>

There are several methods...

1. If your components are related in a parent-child structure, you can pass data values from the parent to the child component.

2. To communicate changes back to the parent component when the child component makes a change, you can utilize Vue.js's event emitter (custom event) to emit an event when a data value changes. This event can then be listened for in another component and appropriate actions taken.

3. If your components do not have a direct relationship, alternative solutions must be used. You can employ either an event bus or a state management library. For Vue, there is an official state management library called VueX which is user-friendly. Alternatively, you can use other libraries such as Redux or Mobx if desired.

This documentation covers all the information you need. I have refrained from including any code as the documentation is very comprehensive on its own.

VueX is highly recommended as it simplifies this process greatly! It is very intuitive to use.

https://v2.vuejs.org/v2/guide/components.html

// This is component A
Vue.component('my-button', {
  props: ['title'],
  template: `<button v-on:click="$emit('add-value')">{{title}}</button>`
});


// This is component B
Vue.component('my-viewer', {
  props: ['counter'],
  template: `<button>{{counter}}</button>`
});

new Vue({
  el: '#app',
  data: {
    counter: 0,
  },
  methods: {
    doSomething: function() {
      this.counter++;
    }
  }
})


Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
});

// Parent Vue instance
new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
});


Vue.component('blog-post2', {
  props: ['post'],
  template: `
                  <div class="blog-post">
                     <h3>{{ post.title }}</h3>
                     <button v-on:click="$emit('enlarge-text')">
                         Enlarge text
                     </button>
                     <div v-html="post.content"></div>
                 </div>`
})

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ],
    postFontSize: 1
  },
  methods: {
    onEnlargeText: function() {
      this.postFontSize++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<p>Two components adding & viewing value</p>
<div id="app">
  <my-button :title="'Add Value'" v-on:add-value="doSomething"></my-button>
  <my-viewer :counter="counter"></my-viewer>
</div>
<br>
<br>
<p>Passing Data to Child Components with Props (Parent to Child)</p>
<div id="blog-post-demo">
  <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
</div>

<p>Listening to Child Components Events (Child to Parent)</p>
<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post2 v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText"></blog-post2>
  </div>
</div>

For effective communication between two components, a parent element is required. Upon clicking the my-button component, it triggers an event named add-value, which invokes the doSomething() function and updates the displayed value in the my-viewer component.

HTML

     <!--PARENT-->
     <div id="app">
          <!--CHILD COMPONENTS-->
          <my-button :title="'Add Value'" v-on:add-value="doSomething"></my-button>
          <my-viewer :counter="counter"></my-viewer>
     </div>

VUE.JS

     // Component A
     Vue.component('my-button',{
         props:['title'],
         template:`<button v-on:click="$emit('add-value')">{{title}}</button>`
     });

     // Component B
     Vue.component('my-viewer',{
        props:['counter'],
        template:`<button>{{counter}}</button>`
     });

     // Parent
     new Vue({
         el: '#app',
         data:{
            counter:0,
         },
         methods:{
             doSomething:function(){
               this.counter++;
             }
         }
     })

This setup follows the guidelines mentioned in the Vue Components Guide.

Passing Data to Child Components with Props (Parent to Child)

VUE.JS

         // Component (child)
         Vue.component('blog-post', {
             /*Props are custom attributes you can register on a component. When a 
               value is passed to a prop attribute, it becomes a property on that 
               component instance*/
             props: ['title'],
             template: '<h3>{{ title }}</h3>'
         });

         // Parent
         new Vue({
            el: '#blog-post-demo',
            data: {
              posts: [
                 { id: 1, title: 'My journey with Vue' },
                 { id: 2, title: 'Blogging with Vue' },
                 { id: 3, title: 'Why Vue is so fun' }
              ]
            }
         });

HTML:

The use of v-for loops through the posts and passes data to the blog-post component.

         <div id="blog-post-demo">
             <blog-post  v-for="post in posts"
                         v-bind:key="post.id"
                         v-bind:title="post.title"></blog-post>
         </div>

Listening to Child Components Events (Child to Parent)

HTML

To listen for events from child components, ensure the registration is done using

v-on:enlarge-text="onEnlargeText"

         <div id="blog-posts-events-demo">
            <div :style="{ fontSize: postFontSize + 'em' }">
                 <blog-post
                          v-for="post in posts"
                          v-bind:key="post.id"
                          v-bind:post="post"
                          v-on:enlarge-text="onEnlargeText"></blog-post>
            </div>
         </div>
     

VUE.JS

When the user interacts with the button, triggering the

v-on:click="$emit('enlarge-text')"

         // Component (child)
         Vue.component('blog-post', {
             props: ['post'],
             template: `
              <div class="blog-post">
                 <h3>{{ post.title }}</h3>
                 <button v-on:click="$emit('enlarge-text')">
                     Enlarge text
                 </button>
                 <div v-html="post.content"></div>
             </div>`
         })

         // Parent
         new Vue({
            el: '#blog-posts-events-demo',
            data: {
               posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' }
               ],
            postFontSize: 1
         },
         methods:{
            onEnlargeText:function(){
               this.postFontSize++;
            }
          }
        })

Dealing with props can be frustrating at times, especially when you have an old external library in jQuery and just need to pass a value. While using props gets the job done most of the time, there are occasions when it's a hassle.

A) Spend countless hours debugging and changing tons of code to pass variables B) A one-liner solution

To simplify things, create a main variable in data called "letmeknow" as an object {}

this.$root.letmeknow

Then, somewhere in the component code, do this:

this.$root.letmeknow = this;

Now, you can easily access and modify values by logging into the component console.log( this.$root.letmeknow )