title: Vue scope: how to delay handling of @mouseover
body: <p>So I want to have an action only if the user has the mouse on the div for at least 1 second. Inside template:</p>
  
  <pre><code>&lt;div @mouseover="trigger"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Inside script:</p>
  
  <pre><code>data() {
      return {
          hovered: false
      }
  }
  
  methods: {
      trigger() {
          setTimeout(function(){ this.hovered = true }, 1000)
      }
  }
  </code></pre>
  
  <p>My problem is that I don't understand the scope of Vue. Because this.hovered is inside another function, it does not find the actual hovered data variable. What's the solution to this?</p>