title: el.addEventListener() on select in other Vue instance
body: <p>I have a custom select component which sits inside an anonymous Vue instance.
  It has a visual part which reflects the <code>&lt;select&gt;</code> options, and clicking on the visual part updates the <code>&lt;select&gt;</code>. The <code>&lt;select&gt;</code> itself would be hidden.</p>
  <p>In another Vue instance I am looking for certain form inputs to calculate a form complete status.
  I am doing so by getting the inputs from the dom (<code>document.querySelector('#someInput')</code>) and adding eventListeners.</p>
  <p>The problem is, that the event on the custom select is not triggering (bubbling?) because it's inside another instance.</p>
  <p>Here is a simplified sample. The visual part is not reflecting select changes to keep the code lean.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;appControl&quot;&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;vue-instance&quot;&gt;
    &lt;form-select inline-template&gt;
      &lt;div&gt;
        &lt;select name=&quot;color&quot; id=&quot;sampleSelect&quot; @change=&quot;handleSelectChange&quot; ref=&quot;htmlSelect&quot;&gt;
          &lt;option value=&quot;&quot;&gt;--select--&lt;/option&gt;
          &lt;option value=&quot;blue&quot;&gt;Blue&lt;/option&gt;
          &lt;option value=&quot;green&quot;&gt;Green&lt;/option&gt;
          &lt;option value=&quot;yellow&quot;&gt;Yellow&lt;/option&gt;
        &lt;/select&gt;
        
        &lt;p&gt;Change select&lt;/p&gt;
        &lt;div class=&quot;buttons-wrapper&quot;&gt;
          &lt;button @click=&quot;setSelect('blue')&quot;&gt;Blue&lt;/button&gt;
          &lt;button @click=&quot;setSelect('green')&quot;&gt;Green&lt;/button&gt;
          &lt;button @click=&quot;setSelect('yellow')&quot;&gt;Yellow&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form-select&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>Vue.component('form-select', {
    
    methods: {
      handleSelectChange: function(e){
          console.log('Component handleSelectChange', e.target.value);
        
        // ...here could be code to update the visual part
      },
      
      setSelect: function(val) {
        // set selected on &lt;select&gt;
        this.$refs.htmlSelect.value = val;
        
        // Trigger change event on &lt;select&gt;
        this.$refs.htmlSelect.dispatchEvent(new Event('change'));
      },
      
    }
  });
  
  
  // Other Vue instance
  var appControl = new Vue({
    el: &quot;#appControl&quot;,
    
    mounted: function(){
      // Get &lt;select&gt; from DOM and listen to change event
      var selectField = document.querySelector(&quot;#sampleSelect&quot;);
      
      // Listen to 'change'. This is not firing
      selectField.addEventListener('change', this.handleDomSelectChange);
    },
    
    methods: {
      handleDomSelectChange: function(e){
          console.log('appControl handle select change', e.target.value);
      }
    }
  })
  
  
  // Generic Vue Instances
  var vueInstances = document.querySelectorAll('.vue-instance');
  
  vueInstances.forEach(function(vueInstance) {
      new Vue({
      el: vueInstance
    })
  })
  </code></pre>
  <p>I know that I can emit a custom event like so:</p>
  <pre><code>handleSelectChange: function(e){
          console.log('Component handleSelectChange', e.target.value);
        
        // Emit custom event
        appControl.$emit('select-change', e.target);
      },
  </code></pre>
  <p>and in the <code>appControl</code> instance</p>
  <pre class="lang-js prettyprint-override"><code>mounted: function(){
      // Get &lt;select&gt; from DOM and listen to change event
      var selectField = document.querySelector(&quot;#sampleSelect&quot;);
      
      // Listen to 'change'. This is not firing
      selectField.addEventListener('change', this.handleDomSelectChange);
      
      // Listen to custom event
      this.$root.$on('select-change', function(el) {
        console.log('*** select-change in appControl:', el.value, el.id);
      });
    },
  </code></pre>
  <p>but I don't want some &quot;global&quot; event and then figure out where it came from, just the normal
  <code>iKNowTheElement.addEventListener(...)</code></p>
  <p><strong>Edit</strong> Expected result for code sample without custom event:</p>
  <p>When selecting &quot;green&quot; on <code>&lt;select&gt;</code> or <code>&lt;button&gt;</code>
  Console outputs
  <code>&quot;Component handleSelectChange&quot;, &quot;green&quot;</code>
  and <code>&quot;appControl handle select change&quot; green</code></p>