title: Custom directive to replace @mouseenter + @mouseleave event?
body: <p>I'm having lots of elements on which <code>@mouseenter</code> set a value to <code>true</code> and <code>@mouseleave</code> sets it to <code>false</code>. Basically what I need is a way to set a reactive variable to <code>true</code> if the mouse hovers the element.</p>
  <p>I've been trying to figure out how to write such <code>custom directive</code> from the <a href="https://vuejs.org/guide/reusability/custom-directives.html#introduction" rel="nofollow noreferrer">docs</a> but it only mentions how to use <code>.focus() js function</code> on an element. Which js functions would be used for said directive?</p>
  <p>Something like:</p>
  <pre><code>const vHover = {
      mounted: (el) =&gt; {
          el.addEventListener('mouseenter', state.hover=true)
          el.addEventListener('mouseleave', state.hover=false)
      }
  }
  </code></pre>