title: Vue submit button from component does not submit
body: <p>I have a component in Vue which I use a substitute for submit buttons. I can pass a handler to it, which the component calls after disabling itself and settings it status as loaded, and it can recover (enable itself again) after errors and display a nifty success animation if all goes well. This works well, with the code below:</p>
  
  <pre><code>// Submit.vue
  &lt;template&gt;
      &lt;button :type="type" :class="classes" :disabled="loading" @click="onClick"&gt;
          &lt;span class="flag" v-if="flag"&gt;&lt;/span&gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import _ from 'lodash'
      export default {
          name: 'submit',
          props: {
              brand: {
                  type: String,
                  default: 'primary'
              },
              // If no handler is provided, will fallback to normal submit button
              handler: {
                  type: Function,
                  required: false
              },
              flag: {
                  type: Boolean,
                  default: false
              }
          },
          data () {
              return {
                  loading: false,
                  success: false
              }
          },
          computed: {
              type () {
                  return typeof this.handler !== 'undefined' ? 'button' : 'submit'
              },
              classes () {
                  return [
                      `btn btn-${this.brand}`,
                      this.loading &amp;&amp; !this.success ? 'loading' : null,
                      this.success ? 'success' : null
                  ]
              }
          },
          methods: {
              onClick (event) {
                  if (this.success) {
                      event.preventDefault()
                      return
                  }
                  this.loading = true
                  if (typeof this.handler !== 'undefined') {
                      // Handler must return a Promise
                      this.handler.call()
                          .then(_.bind(() =&gt; {
                              this.onSuccess()
                          }, this))
                          .catch(() =&gt; {})
                          .then(_.bind(() =&gt; {
                              this.loading = false
                          }, this))
                  }
              },
              resetSuccess () {
                  this.success = false
              },
              onSuccess () {
                  this.success = true
                  setTimeout(this.resetSuccess, 2000)
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>It falls back to a normal submit button if no handler is passed, assuming all you want is to auto-disable the button when the form is submitted. The only problem is <strong>the form is not submitted</strong> when I click the button created from the component.</p>
  
  <p>I think it would be fairly easy to force the submission via JS with the <code>onClick</code> method, but I wanted to understand why it doesn't. Is it a browser issue? A security issue? A Vue issue? Or something else I'm missing that might be right in front of me?</p>
  
  <p>Here's a JSFiddle for quick testing: <a href="https://jsfiddle.net/03fgwgy5/" rel="nofollow noreferrer">https://jsfiddle.net/03fgwgy5/</a>
  The code is not exactly the same, as I'm using single-file components, but the gist is the same and the behaviour can be observed easily.</p>