title: Vue 3 with Quasar - functions with parameters - TypeError: Cannot read properties of undefined
body: <p>I'm having an issue with Vue 3 and Quasar and I think it's a vue 3 issue i'm not understanding so thought I'd ask.  I've seen other questions with this error and the missing piece is a fat arrow function needed on the callback so vue binds <code>this</code> correctly, but i'm already doing that.</p>
  <p>I'm using the new composition API, and inside of setup i'm creating a function, and then calling that function during the callback of a post. When that happens I get the error <code>Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'showNotify')</code>.</p>
  <p>the weird thing that when I call showNotify from the test notify button where it's fired by <code>@click=&quot;showNotify('Vendor not created, response not 1',false)&quot;</code>, the notify code fires with no errors. So i've deduced that it's something with the submit.</p>
  <p>Here's the brief code:</p>
  <p>in template section:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;q-form
     class="q-gutter-md text-body2"
     autofocus
     @submit="onSubmit"
  &gt;
  ....
  &lt;div class="row  q-pt-md "&gt;
    &lt;q-btn label="Submit" type="submit" color="primary"/&gt;
    &lt;q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" /&gt;
    &lt;q-btn label='test notify' color='secondary' @click="showNotify('Vendor not created, response not 1',false)" /&gt;
  &lt;/div&gt;
  ...</code></pre>
  </div>
  </div>
  </p>
  <p>and then my script section looks like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { defineComponent, ref } from "vue";
  import * as C from '../../Constants'
  import { useQuasar } from 'quasar'
  
  export default defineComponent({
      name:"VendorEntry",
      setup(){
          const $q = useQuasar();
         
          const name = ref(null);
          const number = ref(null);
          const address = ref(null);
          const phone = ref(null);
          const email = ref(null);
          const fax = ref(null);
  
          const showNotify = (messagein, positivein) =&gt; {
              let nopts = {
                  message:messagein,
                  color: (positivein ? 'positive':'negative'),
                  icon: (positivein ? 'verified' : 'error'),
                  timeout: (positivein ? 1500 : 3500)
              }
              
              $q.notify(nopts);
          }
  
          return{
              name,
              number, 
              address,
              phone,
              email,
              fax,
              showNotify,
  
              onSubmit(){
  
                  const vendorPost = {
                      name: name.value,
                      number: number.value,
                      address: address.value,
                      phone: phone.value,
                      email: email.value,
                      fax: fax.value
                  };
  
                  console.log(JSON.stringify(vendorPost));
  
                  fetch (`${C.BaseURLdev}/api/vendors`,
                  {
                      method: 'post',
                      headers: {
                          'content-type': 'application/json'
                      },
                      body: JSON.stringify(vendorPost)
                  }).then(response =&gt; response.json())
                    .then((data) =&gt; {
                        console.log(data);
                        if(data === 1){
                          this.showNotify("Vendor  was created successfully.", true);
                        }else{
                          this.showNotify("Vendor not created, response not 1", false);
                        }
                    }).catch(data =&gt; {
                        console.log(data);
                        this.showNotify("error thrown from post call, vendor not created", false);
                    });
              },
              
          }
      }
  })</code></pre>
  </div>
  </div>
  </p>
  <p>I think this should work but this code always errors on the call to this.showNotify when i submit the form.</p>
  <p>I've tried declaring the function in several different ways, both as a const and returning that like the above, and just declaring the function in the return return like onSubmit(), and both give the same error.</p>
  <p>Anyone have any ideas on this? thanks for looking!</p>