title: Vue + Vuetify Validation issue when clearing form
body: <p>I am trying to build some simple CRUD functionality for my app and I want to re-use the same form for both create and update.</p>
  
  <p>my model im updating is Menu.</p>
  
  <p>The way I am doing this (please let me know if there is a better way) is by having a method <code>openForm(menu = null)</code> on the new button I simply dont pass a menu and on the edit button I do.</p>
  
  <p>openForm then checks if menu is null and if it is creates an empty menu object.</p>
  
  <p>This is then stored in <code>data()</code> as menuForForm.</p>
  
  <p>My form receives this as a prop and that is used for rendering my form.</p>
  
  <p>My problem is that when I use the Vuetify <code>$refs.form.reset()</code> method to clear the form I get a whole load of errors relating to null values. It seems this is due to the validation rules as if I remove them its ok.</p>
  
  <p>I can't understnad why a field value being null causes these problems, as if I bind a form to normal <code>data()</code> fields it works fine.</p>
  
  <p>Here is my code:</p>
  
  <p>Parent component</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-flex xs12 sm6 lg4&gt;
          &lt;v_form
              v-if="menuForForm"
              :menu="menuForForm"
              &gt;
          &lt;/v_form&gt;
      &lt;/v-flex&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      data() {
          return {
              menuForForm: null,
              newMenu: {
                  id: '',
                  label: '',
                  url: '',
              },
          }
      },
  methods: {
      openMenuForm(menu = null) {
          menu ? this.menuForForm = JSON.parse(JSON.stringify(menu)) : 
          this.menuForForm = this.newMenu;
          this.$store.dispatch('setShowForm', true);
      },
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Form component</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-form ref="form" v-model="valid"&gt;
          &lt;v-text-field
              v-model="menu.label"
              :rules="labelRules"
              label="Label"
              required
          &gt;
          &lt;/v-text-field&gt;
          &lt;v-btn
              color="primary"
              :disabled="!valid"
              @click="submit"
          &gt;
          submit
          &lt;/v-btn&gt;
          &lt;v-btn 
                @click="clear"
          &gt;
          clear
          &lt;/v-btn&gt;
      &lt;/v-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      data(){
          return{
              valid: true,
              labelRules: [
                  v =&gt; !!v || 'Name is required',
                  v =&gt; v.length &gt;= 3 || 'Label must be atleast than 3 characters'
              ], 
          }
      },
      methods:{
          clear() {
              this.$refs.form.reset();
          }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the error I get one I click clear:</p>
  
  <pre><code>[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'length' of null"
  
  found in
  
  ---&gt; &lt;VTextField&gt;
  
  
  
  [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of null"
  
  found in
  
  ---&gt; &lt;VTextField&gt;
  
  
  TypeError: Cannot read property 'length' of null
      at labelRules (Form.vue?c13f:61)
  </code></pre>
  
  <p>does anyone have any idea why this is happening, I have been on this for hours and its driving me mad.</p>