title: VueJS: why is "this" undefined?
body: <p>I'm creating a component with <a href="https://v2.vuejs.org/v2/guide/" rel="nofollow noreferrer">Vue.js</a>.</p>
  <p>When I reference <code>this</code> in any of the the <a href="https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks" rel="nofollow noreferrer">lifecycle hooks</a> (<code>created</code>, <code>mounted</code>, <code>updated</code>, etc.) it evaluates to <code>undefined</code>:</p>
  <pre><code>mounted: () =&gt; {
    console.log(this); // logs &quot;undefined&quot;
  },
  </code></pre>
  <hr />
  <p>The same thing is also happening inside my computed properties:</p>
  <pre><code>computed: {
    foo: () =&gt; { 
      return this.bar + 1; 
    } 
  }
  </code></pre>
  <p>I get the following error:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'bar' of undefined</p>
  </blockquote>
  <p>Why is <code>this</code> evaluating to <code>undefined</code> in these cases?</p>