title: How to access Vue.js component data from a method?
body: <p>Based on <a href="https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers" rel="nofollow noreferrer">vuejs docs</a> I would expect the following code to work, but <code>this</code> is null when I click the button:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;hello&quot;&gt;
          &lt;button v-on:click=&quot;test&quot;&gt;Test &lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
    name: 'hello',
      methods: {
          test: () =&gt; {
              console.log('log data.message', this.msg); 
          }
      },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Here is the full demo: <a href="https://codesandbox.io/s/vq3ovx9n70" rel="nofollow noreferrer">https://codesandbox.io/s/vq3ovx9n70</a></p>