Share data across different components in Vuejs

There were 2 issues with the way you set it up. Here it is working: https://jsfiddle.net/j9hua7c8/

First issue was in the counter component, you created a new variable called value and it a value of this.start. This took the value of start and assigned it to value, but since value was a new variable it was no longer sync'd to start. Updated version:

var counter = Vue.extend({  props: ['value'],  template: '#counter',  methods: {    increment: function() {this.value++},    decrement: function() {this.value--}  }});

Second thing is, in order to have a child variable sync two-ways, you need to use the .sync modifier on the binding. By default, they are only one-way bindings. Updated:

<counter :value.sync="val"></counter>

You can also use $dispatch and $broadcast to communicate between parent and child components if that is better for your use case.

You have two choices.

1 Manually sync your values

in your increment and decrement functions add this sentence

this.$parent.val = this.value;

and make your alphabet value equal to the parent val

computed: {    value: function() {        return this.$parent.val;    }  }

resulting in this fiddle

2 Use vuex to keep a global state of your data

With vuex you can store a common state for all your components. This state will be reactive, so will be updated for every component when you change its value. This could be an overkill for your use case, but is definitly a choice to keep in mind

As was mentioned before, you can use vuex. However, you don't have to use vuex. Vuex merely helps enforce a convention of how to use a global state, and tries to make it hard to to do the wrong thing.

However, with a little self-discipline, you can easily do it yourself. Just make global object and pass that on to all your components in their data function.