title: Axios request in Vue.js method working when launched from "mounted()" but not when launched from html <form>
body: <p>When I authenticate to <strong>Laravel Passport</strong> backend with <strong>Nuxt.js</strong> like below, it works and I get a token:</p>
  
  <pre><code>mounted() {
    this.axiosGetToken()
  }
  </code></pre>
  
  <p>But, if I run the method with a <code>button</code> in a <code>form</code>, like this:</p>
  
  <pre><code>&lt;form @submit="axiosGetToken()"&gt;
      &lt;button type="submit"&gt;Axios login&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then, I get the status <code>(canceled)</code> for the <strong>Laravel</strong> page in the <em>Network</em> tab of my browser developer's tool.</p>
  
  <p>The method looks like this:</p>
  
  <pre><code>axiosGetToken() {
    const url = 'http://laravel.test/oauth/token'
    const params = {
      client_id: 2,
      client_secret: 'S0gpcgfIDgbvIHCL3jIhSICAiTsTUMOR0k5mdaCi',
      grant_type: 'password',
      username: 'me@home.com',
      password: '1qaz@WSX'
    }
    const headers = {
    }
    this.$axios
      .post(url, params, headers)
      .then(response =&gt; {
        // eslint-disable-next-line
        console.log(response)
      })
      .catch(response =&gt; {
        // eslint-disable-next-line
          console.log(response)
      })
  },
  </code></pre>
  
  <p>What's wrong with this form ?</p>