vue.js - not defined on the instance but referenced during render : <p>I am loading a template that references a client side js file with my code like so:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="../css/app.css"&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
  &lt;div id="map"&gt;
    &lt;script src="../js/app.js" type="text/javascript"&gt;&lt;/script&gt;    
  &lt;div id="offer-details"&gt;
    &lt;form id="offer-form" v-on:submit="makeOffer(tags, description, code)"&gt;  
      &lt;input id="description"/&gt;
      &lt;input id="tags"/&gt;
      &lt;input id="code"/&gt;
      &lt;input type="submit"/&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;    
</code></pre>

<p>My browser shows that the following (details.js) loads successfully.  </p>

<pre><code>var vm = new Vue({
    el: "#details",
    data: {
    offer: {
            publickey: '',
            privatekey: '',          
            name: '',
            service: '',
            value: '',
            currency: '',
            tags: '',
            description: '',
            code: ''
    },             
    methods: {
        makeOffer: function makeOffer(){console.log(vm.publickey)}

    }
    }   
})
</code></pre>

<p>However, when I submit the form I get the following error message:</p>

<pre><code>[Vue warn]: Property or method "makeOffer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)vue.js:2574:7

[Vue warn]: Handler for event "submit" is undefined. 
</code></pre>

<p>It looks to me like I'm defining makeOffer in the method key as I should.  Is this not the same as defining it on the instance?  Why isn't it seeing makeOffer?</p>
