title: Adding eventListener to blur event on custom component?
body: <p>I have a component called <code>styled-input</code> and it's an input with styles, icons, validation, etc.</p>
  
  <p>I am trying to use <code>addEventListener</code> inside a custom directive to listen to events and make things happen.</p>
  
  <pre><code>&lt;styled-input
      v-model=""
      v-on:input=""
      v-on:blur=""
  &gt;&lt;/styled-input&gt;
  </code></pre>
  
  <p>Internally:
  <code>value</code> is a prop (allowing for <code>v-model</code> binding outside)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;input 
              v-bind:value="value"
              v-on:input="$emit('input', $event.target.value)"
              v-on:blur="$emit('blur', $event.target.value)"
          /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I'm trying to <code>addEventListener</code>s to the tag through custom directives for custom validation.</p>
  
  <pre><code>&lt;styled-input
      v-model=""
      v-custom-validator:credit-card
  &gt;&lt;/styled-input&gt;
  </code></pre>
  
  <p>Inside the directive I am using <code>addEventListener</code> to listen to events from the input field.</p>
  
  <pre><code>Vue.directive('custom-validator', {
      bind: function(el, binding) {
          el.addEventListener('blur', (event) =&gt; {
              // Does not fire
          });
  
          el.addEventListener('input', (event) =&gt; {
              /// Fires
          });
      },
  });
  </code></pre>
  
  <p>Why doesn't the blur event fire, while the input event fires?</p>
  
  <p>How can I get the blur event to fire?</p>