Проблема с проверкой Vue + Vuetify при очистке формы

Я пытаюсь создать простую функциональность CRUD для своего приложения и хочу повторно использовать ту же форму как для создания, так и для обновления.

Моя модель, которую я обновляю, - это Меню.

Я делаю это (пожалуйста, дайте мне знать, если есть лучший способ), используя метод openForm(menu = null) на новой кнопке, я просто не передаю меню, а на кнопке редактирования я делаю.

Затем openForm проверяет, является ли меню нулевым, и создает ли он пустой объект меню.

Затем он сохраняется в data() как menuForForm.

Моя форма получает это как опору, которая используется для рендеринга моей формы.

Моя проблема в том, что когда я использую метод Vuetify $refs.form.reset() для очистки формы, я получаю массу ошибок, связанных с нулевыми значениями. Кажется, это связано с правилами проверки, как будто я их удаляю.

Я не могу понять, почему значение поля, равное нулю, вызывает эти проблемы, как будто я привязываю форму к обычным полям data(), она работает нормально.

Вот мой код:

Родительский компонент

<template>
    <v-flex xs12 sm6 lg4>
        <v_form
            v-if = "menuForForm"
            :menu = "menuForForm"
            >
        </v_form>
    </v-flex>
</template>

<script>
    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);
    },
}

</script>

Компонент формы

<template>
    <v-form ref = "form" v-model = "valid">
        <v-text-field
            v-model = "menu.label"
            :rules = "labelRules"
            label = "Label"
            required
        >
        </v-text-field>
        <v-btn
            color = "primary"
            :disabled = "!valid"
            @click = "submit"
        >
        submit
        </v-btn>
        <v-btn 
              @click = "clear"
        >
        clear
        </v-btn>
    </v-form>
</template>

<script>
    data(){
        return{
            valid: true,
            labelRules: [
                v => !!v || 'Name is required',
                v => v.length >= 3 || 'Label must be atleast than 3 characters'
            ], 
        }
    },
    methods:{
        clear() {
            this.$refs.form.reset();
        }
    }

</script>

Вот ошибка, которую я получаю, я нажимаю "Очистить":

[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>



[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of null"

found in

---> <VTextField>


TypeError: Cannot read property 'length' of null
    at labelRules (Form.vue?c13f:61)

Кто-нибудь знает, почему это происходит? Я занимаюсь этим уже несколько часов, и это сводит меня с ума.