title: vm.handleClick is not a function on vue.js
body: <p>I am using toggle buttons of argon template:
  <a href="https://demos.creative-tim.com/argon-design-system/docs/components/forms.html" rel="nofollow noreferrer">argon template docs</a></p>
  
  <p>And I want to put an handleChange on the toggle buttons, but It doesn't work, here my code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="option"&gt;
        &lt;div&gt;Show value
            &lt;label class="custom-toggle"&gt;
            &lt;input type="checkbox" @click="handleClick($event)"&gt;
            &lt;span class="custom-toggle-slider rounded-circle"&gt;&lt;/span&gt;
            &lt;/label&gt;
            &lt;div v-if="viewCheck"&gt; 
             &lt;div&gt;Name &lt;/div&gt;
             &lt;div&gt;Surname&lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Options',
    data: function() {
      return {
        viewCheck:false
      }
    },
    handleClick: function(event) {
        console.log(event)
        this.viewCheck = true
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>In fact when I click on the toggle button I get this message:</p>
  
  <blockquote>
    <p>TypeError: _vm.handleClick is not a function<br>
        at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6f2958af","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&amp;index=0!./src/views/Option.vue<br>
    (app.js:7731), :22:34)<br>
        at invokeWithErrorHandling (vue.esm.js?efeb:1863)<br>
        at HTMLInputElement.invoker (vue.esm.js?efeb:2188)<br>
        at HTMLInputElement.original._wrapper (vue.esm.js?efeb:7559)</p>
  </blockquote>