title: Vuejs listeners
body: <p>I'm creating simple app, which will have few listeners. I can't figure out how logic behind that should look like.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="playerProgressBar"&gt;
      &lt;div id="playerHead"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In Vue object i have defined variable:</p>
  
  <pre><code>music: document.getElementById('playerHead');
  </code></pre>
  
  <p>My listener should look like this:</p>
  
  <pre><code>music.addEventListener("timeupdate", timeUpdate, false);
  
  music.addEventListener("canplaythrough", function () {
      //code
  }, false);
  
  function timeUpdate() {
      //code
  }
  </code></pre>
  
  <p>So what would be correct way to use listeners in vuejs? Should i use custom directives here? Since I have no event I can't use methods. Putting whole logic in <code>ready</code> function doesn't seem to be correct way. Thanks in advance!</p>