$refs not access CFormInput Component

[viral-prm]

Here is my form component and I'm applying custom validation to validate valid phone number format

<CFormInput type="text" class="form-control" v-model="customer.ContactPhone" ref="contactPhonea" feedbackInvalid="Please provide valid contact phone." @input="validatorContactPhone" required />

here is script

<script>
  export default {
    name: 'Customer',
  data() {
    return {
      customer: {
        ContactPhone:""
      }
    }
  },
  methods: {
    validatorContactPhone() { 
      
      let val = this.$refs.contactPhonea.value;
      if(!this.validPhone(val)){                
        this.$refs.contactPhonea.setCustomValidity("**some notification string ...**")        
      }
      else{
        this.$refs.contactPhonea.setCustomValidity('');
      }
      return val ? this.validPhone(val) : true
    },
  }
</script>

as in above method could not getting this.$refs.contactPhonea.value value of input

Looking for Help Thanks in advance..

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions