title: Form submit is not prevented when trying to integrate VueJS with SemanticUI
body: <p>I'm trying to integrate SemanticUI with Vue and I have a Login component with a form in it.</p>
  
  <p>I've added <code>v-on:submit.prevent="onSubmit"</code> to the form but when I press enter on one of the form's fields the form still submits and my method ie never called.</p>
  
  <p>Basically what I'm trying to do is replicate the <code>on("submit"</code> event from jQuery.</p>
  
  <p>Any idea what's the problem?</p>
  
  <p>main.js</p>
  
  <pre><code>import Vue       from "vue";
  import VueRouter from "vue-router";
  import App       from "./App";
  
  Vue.use(VueRouter);
  
  new Vue({
      el        : "#app",
      template  : "&lt;App/&gt;",
      components: { App }
  });
  </code></pre>
  
  <p>and Login.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="ui middle aligned center aligned grid"&gt;
          &lt;div class="column"&gt;
              &lt;h2 class="ui teal header"&gt;
                  Login
              &lt;/h2&gt;
  
              &lt;form class="ui large form login" v-on:submit.prevent="onSubmit"&gt;
                  &lt;div class="ui stacked segment"&gt;
                      &lt;div class="field"&gt;
                          &lt;div class="ui left icon input"&gt;
                              &lt;i class="cloud icon"&gt;&lt;/i&gt;
                              &lt;input type="text" name="hostname" placeholder="Hostname" value=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="field"&gt;
                          &lt;div class="ui left icon input"&gt;
                              &lt;i class="user icon"&gt;&lt;/i&gt;
                              &lt;input type="text" name="username" placeholder="Username" value=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="field"&gt;
                          &lt;div class="ui left icon input"&gt;
                              &lt;i class="lock icon"&gt;&lt;/i&gt;
                              &lt;input type="password" name="password" placeholder="Password" value=""&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui fluid large teal submit button"&gt;Login&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: "login",
  
          mounted: function() {
              this.$nextTick(function() {     
                  jQuery(this.$el).find("form").form({
                      fields: {
                          hostname: {
                              identifier: "hostname",
                              rules     : [{
                                  type  : "empty",
                                  prompt: "Please enter the instance hostname"
                              }]
                          },
  
                          username: {
                              identifier: "username",
                              rules     : [{
                                  type  : "empty",
                                  prompt: "Please enter your username"
                              }]
                          },
  
                          password: {
                              identifier: "password",
                              rules     : [{
                                  type  : "empty",
                                  prompt: "Please enter your password"
                              }]
                          }
                      }
                  });
              });
          },
  
          methods: {
              onSubmit: function(e) {
                  alert("ok");
              }
          }
      };
  &lt;/script&gt;
  </code></pre>