title: Why my alert function is not working when I click on button in Vue.js
body: <p>This is my index.html</p>
  
  <pre><code>&lt;body&gt;
      &lt;app&gt;&lt;/app&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my main.js</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  
  new Vue({
    el: 'body',
    components: { App }
  })
  </code></pre>
  
  <p>This is my App.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;img class="logo" src="./assets/logo.png"&gt;
      &lt;hello&gt;&lt;/hello&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Hello from './components/Hello'
  
  export default {
    components: {
      Hello
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is my Hello.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="hello"&gt;
      &lt;h1&gt;
          {{ msg }}
      &lt;/h1&gt;
      &lt;button v-on:click="showAlert"&gt;Click&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
  
        msg: 'Hello World!'
      }
    },
    showAlert: () =&gt; {
      alert('test')
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the error message from the Chrome console:</p>
  
  <blockquote>
    <p>[Vue warn]: v-on:click="showAlert" expects a function value, got undefined (found in component: )</p>
  </blockquote>
  
  <p>I can see "Hello world!" on my screen and the button but nothing happened when I click on it.</p>
  
  <p>I suppose I will have "test" alert message.</p>
  
  <p>Did I do something wrong?</p>