How to update one component from another component in vue.js

You can use this.$root without global variable:

// component A emits an event
export default {
  name: 'A',
  methods: {
    buttonClicked: function () {
      this.$root.$emit('myEvent', 'new message!');
    }
  }

// component B catch your event
export default {
  name: 'B',
  data () {
    return {
        message: 'Old message!'
    }
  },
  mounted: function () { 
    this.$root.$on('myEvent', (text) => { // here you need to use the arrow function
     this.message = text;
    })
  }
}

It is not allowed to communicate to another component directly. You can use a parent component to communicate between the components or some kind of event bus.

var bus = new Vue();

Component A emits an event while component B may catch it and vice versa.

// component A
bus.$emit('cool_event_name', interesting_data)

// component B
bus.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})

Another solution might be to use $root which can be accessed from all sub-components of a Vue instance. This economizes on the definition a global bus (like above). Note that this method is not recommended as a general approach and acts more as a solution to certain edge cases.

// component A
this.$root.$emit('cool_event_name', interesting_data)

// component B
this.$root.$on('cool_event_name', function(interesting_data) {
   console.log(interesting_data)
})