Vuelidate never $v.$invalid always true even if field is valid

Question

I have a similar problem to the one faced as described in Vuelidate never v.dirty always true even if all requirements are met

The $invalid never becomes false in my form (which is similar to the one in the above link. I am using validationmixins and vuelidate validations as well). It is false on page load since I am pre-populating the fields with data from the api. My field validation contains required and a maxLength of 400. Any suggestions on how to make the $invalid to false if not touched?

Tried a $reset on mounted() but that removes the pre-populated field values. Printing this.$v.$errors is undefined when printed in the console. Can anyone suggest why the $invalid is always true and at what point does it need to be reset?

<template>
      <v-container max-width="100%">
        
        
        <form>
          <v-text-field
            :label="`First Name`"
            v-model="contactInfo.firstName"
            :error-messages="nameErrors($v.contactInfo.firstName)"
            @input="$v.contactInfo.firstName.$touch()"
            @blur="$v.contactInfo.firstName.$touch()"
          >
          </v-text-field>
    
          <v-btn class="mr-4" @click="submit"> submit </v-btn>
          <v-btn @click="clear"> clear </v-btn>
        </form>
      </v-container>
    </template>
    
    
    <script>
    
    import { validationMixin } from 'vuelidate'
    import { required, maxLength, email } from 'vuelidate/lib/validators'
    
    export default {
      mixins: [validationMixin],
      name: 'contact-info',
    
      data() {
        return {
          contactInfo: {
            firstName: this.firstName,
          },
        }
      },
    validations: {
        contactInfo: {
          firstName: {
            required: required,
            maxLength: maxLength(40),
          },
        },
      },
      props: {
        contactInfoProp: {
            firstName: {
            type: String,
            default: null,
            },
        },
      },
    methods: {
        nameErrors(element) {
    
          if (element.$dirty && element.$invalid) {
            if (!element.maxLength) {
              return ['Name cannot exceed 40 characters']
            }
            return ['Required']
          }
          return []
        },
      },
    }
    </script>

Here is how I am setting it in another vue component. The api results are not being populated yet.

<contact-info :contact-info-prop="`${resultsList.firstName}`"></contact-info>