title: Vue: TypeError: _vm.myFunction is not a function
body: <p>I am trying to add a simple button in a <code>.vue</code> file to log something to the console with this code:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button v-on:click=&quot;sayHello()&quot;&gt;Click me&lt;/button&gt; 
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data() {
    },
    methods: {
      sayHello: function () {
        console.log('Hello!')
      }
    },
  };
  </code></pre>
  <p>I get the following errors in the console:</p>
  <pre><code>TypeError: _vm.sayHello is not a function
  </code></pre>
  <p>and</p>
  <pre><code>Property or method &quot;sayHello&quot; is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
  </code></pre>
  <p>I have seen some tutorials saying that you should add it to data, but it just says that <code>sayHello()</code> is undefined,  or when I define <code>sayHello()</code> in <code>data</code>, it says <code>sayHello()</code> is defined but never used.</p>
  <p>I have even tried just doing the following:</p>
  <pre><code>&lt;button v-on:click=&quot;console.log('Hello!')&quot;&gt;Click me&lt;/button&gt;
  </code></pre>
  <p>but it gives me this error:</p>
  <pre><code>TypeError: Cannot read property 'log' of undefined
  </code></pre>
  <p>Can someone please help me with this? It's probably something super obvious that I haven't tried.</p>