title: Trigger submit with prevent default
body: <p>I'm trying to call submit method on form via refs from my script. On form tag I have <code>@submit.prevent</code>.</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;form ref=&quot;search-form&quot; @submit.prevent=&quot;sub&quot;&gt;
        &lt;input type=&quot;text&quot; required /&gt;
      &lt;/form&gt;
      &lt;button @click=&quot;submitForm&quot;&gt;click me&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;App&quot;,
    methods: {
      submitForm() {
        this.$refs[&quot;search-form&quot;].submit();
      },
      sub() {
        console.log(&quot;submitted&quot;);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>My problems are that when I click button:</p>
  <ul>
  <li>page get reloaded like prevent default is not working</li>
  <li>sub() is not called at all</li>
  </ul>
  <p>Why?</p>