Vuelidate display error messages based on server side response?

Is there a way to create a validation on an input field based on a server side response with a vuelidate helper? I used a different approach by creating some data fields and then in my form submit check what code is being returned from the server and then displaying the error message from the data. This "kind of" works but now when the user types in the field again the error message remains until the server returns a success code.

My end result / goal would be just display the same error message for each response scenario and when the error is showing from server code responses and user begins to type again the error message is removed until another request is made.

<div class="form-field">
    <label for="">
        Enter your patient ID
    </label>
    <input type="text" class="form-input" name="isPatient" id="isPatient" v-model="$v.formData.isPatient.$model" />

    <label v-if="($v.formData.isPatient.$dirty && !$v.formData.isPatient.validInput) || invalidPatient"
        class="error error--invalidIsPatient">
        We're sorry, this patient does not exist.
    </label>
</div>

<div class="form-field">
    <label for="">
        Enter your Childs ID
    </label>
    <input type="text" class="form-input" name="isChild" id="isChild" v-model="$v.formData.isChild.$model" />

    <label v-if="($v.formData.isChild.$dirty && !$v.formData.isChild.validInput) || invalidChild"
        class="error error--invalidIsChild">
        We're sorry, this child does not exist.
    </label>
</div>


    <script>
        import { validationMixin } from 'vuelidate'
        const { required } = require('vuelidate/lib/validators')
        const VueScrollTo = require('vue-scrollto')
    
        export default {
            name: 'ActivateCard',
            mixins: [validationMixin],
            data() {
                return {
                    formData: {
                        isPatient: null,
                        isChild: null
                    },
                    showDemographics: false,
                    showIdErrors: false,
                    showConfirmation: false,
                    invalidPatient: false,
                    invalidChild: false
                }
            },
            validations: {
                formData: {
                    isPatient: {
                        validInput: (value, vm) => {
                            const isValidValue = value != null && value.trim().length
                            const altValueIsValid = vm.isChild !== null && vm.isChild.trim().length
    
                            return isValidValue ? true : altValueIsValid
                        }
                    },
                    isChild: {
                        validInput: (value, vm) => {
                            const isValidValue = value !== null && value.trim().length
                            const altValueIsValid = vm.isPatient !== null && vm.isPatient.trim().length
    
                            return isValidValue ? true : altValueIsValid
                        }
                    }
                }
            },
            methods: {
                submitCardId() {
    
                    this.$v.$reset()
                    this.$v.$touch()
    
                    if (!this.$v.$invalid) {
    
    
                        const formData = new FormData()
    
                        formData.append('method', 'activate')
                        formData.append('isPatient', this.formData.isPatient)
                        formData.append('isChild', this.formData.isChild)
    
    
                        this.$services
                            .post('', formData)
                            .then(response => {
                                const responseCode = response.data.trim()
                                const responseSuccess = responseCode === 'success'
                                const responseHdBad = responseCode === 'hd-bad'
                                const responseCardBad = responseCode === 'card-bad'
                                const responseBothBad = responseCode === 'both-bad'
                                console.log(`activate response: ${responseCode}`)
    
                                if (responseSuccess) {
                                    this.showDemographics = true
                                    this.invalidPatient = false
                                    this.invalidChild = false
                                }
                                if (responseBothBad) {
                                    this.invalidPatient = true
                                    this.invalidChild = true
                                }
                                if (responseHdBad) {
                                    this.invalidPatient = true
                                }
                                if (responseCardBad) {
                                    this.invalidChild = true
                                }
                            })
                            .catch(err => {
                                console.log(err + ' Activate Card Error')
                            })
                    }
                }
            }
        }
    </script>