title: Property or method not defined in .vue file
body: <p>Everything in my app was working perfectly fine until I began to add my javascript. Now I continuously get errors in the console. </p>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p><strong><em>Property or method "show" 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.</em></strong></p>
  </blockquote>
  
  <p>As well as this error:</p>
  
  <blockquote>
  <pre><code>TypeError: _vm.show is not a function
    at click App.vue?d98c:25
    at HTMLButtonElement.invoker vue.esm.js?efeb:1906
  </code></pre>
  </blockquote>
  
  <p>Desired Outcome: Click on "loginBtn" alert prompts "click". </p>
  
  <hr>
  
  <p>My code:</p>
  
  <pre><code>// app.vue script 
  export default {
    name: 'app'
  }
  
  var show = new Vue({
    el: '#loginBtn',
    data: {
      n: 0
    },
    methods: {
      show: function(event) {
        targetId = event.currentTarget.id;
        alert('click')
      }
    }
  })
  </code></pre>
  
  <p> </p>
  
  <pre><code>&lt;!-- the button --&gt;
  &lt;template&gt;
    &lt;div&gt;
      &lt;button v-on:click="show($event)" id="loginBtn"&gt;Login&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>