title: How to properly pass data to sibling component using VueJS?
body: <p>Let's say I have <code>CountrySelect</code> and <code>CitySelect</code>, where in <code>CountrySelect</code> are listed all countries and in <code>CitySelect</code> are only listed those cities of currently selected country...</p>
  
  <p>What would the proper way to pass newly selected country. As I have read in vuejs documentation:</p>
  
  <blockquote>
    <p>In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events. Let’s see how they work next.</p>
  </blockquote>
  
  <p>So in this case, I would detect change of select box inside of <code>CountrySelect</code> and fire event <code>changed</code> and along with it a country object. Then the parent component of <code>CountrySelect</code> would listen for this event and then when that happens will update its attribute <code>country</code>. Attribute <code>country</code> is "observed" in parent component and changing its value will cause for DOM to update, so HTML attribute on <code>&lt;city-select&gt;</code> tag called <code>country</code> would change. But then how would I detect property change of <code>CitySelect</code> component, since I need to reload cities via AJAX. I think of putting <code>country</code> property in <code>watch</code> object in <code>CitySelect</code> but that does not seems like an elegant solution to me, it doesn't feels quire right to do...</p>
  
  <pre><code>&lt;template&gt;
      &lt;parent&gt;
          &lt;country-select name="country_id" v-model="country"&gt;&lt;/country-select&gt;
          &lt;city-select name="city_id" :country="country" v-model="city"&gt;&lt;/city-select&gt;
      &lt;/parent&gt;
  &lt;template&gt;
  
  &lt;script&gt;
      export default {
          data: function() {
              return {
                  country: null,
                  city: null,
              };
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Other way around that I think is if do something like this in parent:</p>
  
  <pre><code>this.$refs.citySelect.emit('countryChanged', this.country)
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>this.$refs.citySelect.countryChanged(this.country)
  </code></pre>
  
  <p>I do not know if these two are possible... So what would be the correct way for <code>CountrySelect</code> component to tell to its sibling component <code>CitySelect</code> to update cities list...</p>