title: How to catch events across multiple child Vue components
body: <p>I am building a form framework in vue. I have components for each field type. Each field type component uses this.$emit to communicate changes with the parent component.</p>
  
  <p>I am able to trigger events in the parent component using v-on directives as follows:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div v-if="fieldsLoaded"&gt;
      &lt;form-select :field="fields.title" v-on:updated="validate" &gt;&lt;/form-select&gt;
      &lt;form-input :field="fields.first_name" v-on:updated="validate" &gt;&lt;/form-input&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>However, I don't want to have to manually specify that every component should trigger the <code>validate</code> method individually.</p>
  
  <p>How can I have the parent component listen for the <code>updated</code> emit across all its child components? </p>
  
  <p><strong>Edit</strong>: I'm looking for something like the below, though $on only catches emits that occur within the same component, rather than its children</p>
  
  <pre><code>created: function(){
      this.$on('updated',validate)
  }
  </code></pre>