title: "Cannot POST /" in Vue (Gridsome) App - Netlify Forms prevent redirect
body: <p>I am building a personal website with Gridsome. I am trying to set up a newsletter signup form via Netlify Forms. I don't want the user to be redirected after clicking 'Submit'. To prevent that I use <code>@submit.prevent</code> like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;form name= "add-subscriber" id="myForm" method="post" @submit.prevent="handleFormSubmit" 
  data-netlify="true" data-netlify-honeypot="bot-field"&gt;
    &lt;input type="hidden" name="form-name" value="add-subscriber" /&gt;
    &lt;input type="email" v-model="formData.userEmail" name="user_email" required="" id="id_user_email"&gt;
    &lt;button type="submit" name="button"&gt;Subscribe&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then using a mix of the following guides (<a href="https://gridsome.org/docs/guide-forms/#netlify-forms" rel="nofollow noreferrer">gridsome guide</a>, <a href="https://css-tricks.com/using-netlify-forms-and-netlify-functions-to-build-an-email-sign-up-widget/" rel="nofollow noreferrer">CSS-Tricks guide</a>) I do the following in my script section:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  import axios from "axios";
  
  export default {
      data() {
          return {
              formData: {},
              }
          },
  
      methods: {
          encode(data) {
              return Object.keys(data)
              .map(key =&gt; encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
              .join('&amp;')
          },
  
          handleFormSubmit(e) {
              axios('/', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                  body: this.encode({
                      'form-name': e.target.getAttribute('name'),
                      ...this.formData,
                  }),
              })
              .then(() =&gt; this.innerHTML = `&lt;div class="form--success"&gt;Almost there! Check your inbox for a confirmation e-mail.&lt;/div&gt;`)
              .catch(error =&gt; alert(error))
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <h2>Error</h2>
  
  <p>Whatever I try I can't figure out how to configure the desired behavior. I keep getting the following errors - > <code>Error: Request failed with status code 404</code> &amp; <code>Cannot POST /</code></p>
  
  <h2>Note</h2>
  
  <p>The reason I want to do it this way is that after the user submits the form a Netlify Function will be called to send the email_adress to EmailOctopus via their API.</p>
  
  <p>This is how the function looks like:</p>
  
  <p><strong>submissions-created.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import axios from "axios";
  
  exports.handler = async function(event) {
      console.log(event.body)
      const email = JSON.parse(event.body).payload.userEmail
      console.log(`Recieved a submission: ${email}`)
  
      axios({
          method: 'POST',
          url: `https://emailoctopus.com/api/1.5/lists/contacts`,
          data: {
              "api_key": apikey,
              "email_address":  email,
          },
      })
      .then(response =&gt; response.json())
      .then(data =&gt; {
          console.log(`Submitted to EmailOctopus:\n ${data}`)
      })
      .catch(function (error) {
          error =&gt; ({ statusCode: 422, body: String(error) })
      });
  }
  </code></pre>
  
  <p>Sorry for the long question. I really apreciate your time and your help. If you need any further details please let me know.</p>