title: Why does using the same vue directive multiple times call updates on all of them?
body: <p>I've created a vue directive that I'm attaching to multiple input elements on the same page, and have noticed that when I start typing in one of them, the 'update' event fires for all elements in the page. I had expected to only have one event, for the particular element that I had updated. </p>
  
  <p>My question is, Is there a way to prevent the event firing, or filtering the events so that I can handle only the input that is changing?</p>
  
  <p><strong>Heres the code for my directive and view:</strong></p>
  
  <pre><code>Vue.directive('test', {
    bind: (el) =&gt; {
      console.log(el.id + " bound")
    },
    update: (el) =&gt; {
      console.log(el.id + " updated")
    }
  })
  
  new Vue({
    el: "#app",
    data: {
      testval1: null,
      testval2: null,
    },
    methods: {
    }
  })
  </code></pre>
  
  <p><strong>and the template:</strong> </p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;input id="testinput1" v-model="testval1" v-test /&gt;
    &lt;input id="testinput2" v-model="testval2" v-test /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a JSFiddle of the issue: <a href="https://jsfiddle.net/eywraw8t/415288/" rel="noreferrer">https://jsfiddle.net/eywraw8t/415288/</a></p>
  
  <p>In this JSFiddle, you can see in the console that if you type into the input field, it fires the update for both input fields.</p>