title: Problems with validation before submit
body: <p>I'm trying to get an example from the VeeValidate docs to work. It can be found <a href="https://logaretm.github.io/vee-validate/guide/validation-observer.html#validate-before-submit" rel="nofollow noreferrer">here</a>. I'm clearly missing something but I don't know what. </p>
  
  <p>My form is always valid, even though I'm not adding any text to the inputs. Do I need to customise the required rule somehow?
  <a href="https://codesandbox.io/s/vue-template-c84bm" rel="nofollow noreferrer">CodeSandbox</a></p>
  
  <pre><code>&lt;template&gt;
    &lt;ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" @submit.prevent="submit()"&gt;
      &lt;input type="text" rules="required"&gt;
      &lt;br&gt;
      &lt;input type="text" rules="required"&gt;
      &lt;br&gt;
      &lt;button :disabled="invalid"&gt;Submit&lt;/button&gt;
    &lt;/ValidationObserver&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ValidationObserver } from "vee-validate";
  
  export default {
    components: {
      ValidationObserver
    },
    methods: {
      async submit() {
        const isValid = await this.$refs.observer.validate();
  
        console.log("Form is valid", isValid);
  
        if (!isValid) {
          // ABORT!!
        }
  
        //  ship it
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>