How to validate a field only if the checkbox is enabled?

Question

Vue.js

Good afternoon, there is a form with two inputs, one is validated by default for an empty value, and the second only if the checkbox is enabled (then the input appears).

Everything works with the first input, but with the second one there is always an error, I will be very grateful for the help.

<form action=""  @submit.prevent="editInfo($event)">

                <p class="sub-text">Информация о ректоре</p>
                <div class="rector-info">
                    <div class="input-group" :class="{ 'form-group--error': $v.forms.rector.$error, 'form-group--success': !$v.forms.rector.$invalid }">
                        <label for="fio-rector">Ректор</label>
                        <div class="input-container">
                            <input id="fio-rector" name="manager_fullname_ua" type="text" placeholder="ПІБ" v-model="$v.forms.rector.$model">
                            <div class="error" v-if="!$v.forms.rector.required && $v.forms.rector.$dirty">Поле не может быть пустым</div>
                        </div>
                    </div>
                </div>

                <p class="sub-text">Дополнительные функции</p>
                <div class="additional-functions">
                    <div class="input-group">
                        <input id="additional-checkbox" name="schedule" type="checkbox" v-model="visible">
                        <label for="additional-checkbox" class="custom-checkbox">
                            <span>Дополнительная функция 0</span>
                        </label>
                    </div>

                    <div class="input-group">
                        <input v-if="visible" name="shedule_start_date" type="text" placeholder="Дополнительная функция 0" v-model="$v.forms.additional.$model">
                        <div class="error" v-if="!$v.forms.additional.required && $v.forms.additional.$dirty">Поле не может быть пустым</div>
                    </div>
                </div>

                <div class="btn-container">
                    <button type="submit" class="btn-primary edit" @click="editInfo($event)" :disabled="submitStatus === 'PENDING'">Добавить</button>
                </div>
                    
                </form>

new Vue({
    el: '#App',
    data: {
        visible: false,
        forms: {
            rector: '',
            additional: ''
        }
    },
    validations() {
        return {
            forms: {
                rector: {required},
                // как записать условие что если visible === true добавлять валидацию к полю additional?
                additional: {required}
            }
        }
    },
    methods: {
        editInfo: function (e) {

            let target = e.target || e;
            this.$v.$touch()
            if (this.$v.$invalid) {
                console.log('Error');
                this.submitStatus = 'ERROR'
            } else {
                console.log("Done")
            }
        },
    }
})

Answer 1

<div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">

additional: this.visible ? { required } : {},