Share data across different components in Vuejs
<p>Given the mini Vuejs app down below.</p>

<p>When I click one of my increment/decrement buttons, the value within the "counter" component updates but the value inside "alphabet" doesn't.<br>
Any ideas on how can I share the same data across those two components so that they automatically update ?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = Vue.extend({
    props: ['start'],
    template: '#counter',
    data: function() {
      return {
        value: this.start
      }
    },
    methods: {
      increment: function() {
        this.value++
      },
      decrement: function() {
        this.value--
      }
    }
  });

  var alphabet = Vue.extend({
    props: ['value'],
    template: '#alphabet',
    data: function() {
      return {
        value: 0
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      val: 5
    },
    components: {
      counter: counter,
      alphabet: alphabet
    }
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script id="counter" type="text/template"&gt;
  &lt;button @click="increment"&gt;+&lt;/button&gt; {{ value }}
  &lt;button @click="decrement"&gt;-&lt;/button&gt;
&lt;/script&gt;
&lt;script id="alphabet" type="text/template"&gt; {{ value }} &lt;/script&gt;
&lt;div id="app"&gt;
  &lt;counter :start="val"&gt;&lt;/counter&gt;
  &lt;alphabet :value="val"&gt;&lt;/alphabet&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>