title: Communication between sibling components in Vue.js 2.0
body: <h1>Overview</h1>
  <p>In Vue.js 2.x, <a href="https://github.com/vuejs/vue/issues/2873#issuecomment-223759015" rel="noreferrer"><code>model.sync</code> will be deprecated</a>.</p>
  <p>So, what is a proper way to communicate between sibling components in <a href="https://github.com/vuejs/vue/issues/2873" rel="noreferrer">Vue.js 2.x</a>?</p>
  <hr />
  <h2>Background</h2>
  <p>As I understand Vue.js 2.x, the preferred method for sibling communication <strong>is to use a store or an event bus</strong>.</p>
  <p>According to <a href="http://forum.vuejs.org/user/evan" rel="noreferrer">Evan</a> (creator of Vue.js):</p>
  <blockquote>
  <p>It's also worth mentioning &quot;passing data between components&quot; is
  generally a bad idea, because in the end the data flow becomes
  untrackable and very hard to debug.</p>
  <p>If a piece of data needs to be shared by multiple components, prefer
  <a href="http://vuejs.org/guide/state-management.html" rel="noreferrer">global stores</a> or <a href="https://github.com/vuejs/vuex/" rel="noreferrer">Vuex</a>.</p>
  </blockquote>
  <p>[<a href="http://forum.vuejs.org/topic/1530/pass-data-between-components/4" rel="noreferrer">Link to discussion</a>]</p>
  <p>And:</p>
  <blockquote>
  <p><code>.once</code> and <code>.sync</code> are deprecated. Props are now always one-way down. To
  produce side effects in the parent scope, a component needs to
  explicitly <code>emit</code> an event instead of relying on implicit binding.</p>
  </blockquote>
  <p>So, <a href="https://github.com/vuejs/vue/issues/2873#issuecomment-223759341" rel="noreferrer">Evan suggests</a> using <code>$emit()</code> and <code>$on()</code>.</p>
  <hr />
  <h2>Concerns</h2>
  <p>What worries me is:</p>
  <ul>
  <li>Each <code>store</code> and <code>event</code> has a global visibility (correct me if I'm wrong);</li>
  <li>It's too wasteful to create a new store for each minor communication;</li>
  </ul>
  <p>What I want is to some <strong>scope</strong> <code>events</code> or <code>stores</code> visibility for siblings components. (Or perhaps I didn't understand the above idea.)</p>
  <hr />
  <h1>Question</h1>
  <p>So, what is the correct way to communicate between sibling components?</p>