This is my first public question on Stackoverflow (:

I am working on a Vue.js component that uses the VueTelInput component for phone number input. I am encountering an issue where the $refs for VueTelInput is undefined when I try to access its choose method. Here is a snippet of my code:

<template>
  <VueTelInput
    ref="creationPhoneInput"
    v-model="phone"
    :defaultCountry="SocietyCountryCode"
    :inputOptions="{ placeholder: 'Teléfono de contacto' }"
    :dropdownOptions="{
      showFlags: true,
      showDialCodeInSelection: true,
      showSearchBox: true
    }"
    @country-changed="(code: CountryCode) => updateCountryCode(code, 'creation')"
  ></VueTelInput>
</template>

<script>
import { nextTick } from 'vue'
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';

export default {
  data() {
    return {
      phone: '',
      SocietyCountryCode: '',
    };
  },
  components: {
    VueTelInput
  },
  async mounted() {
    await this.loadData();
  },
  methods: {
    async loadData() {
      const providerResponse = await fetchProviderData();
      await nextTick();
      if (this.$refs.creationPhoneInput) {
        await this.$refs.creationPhoneInput.choose(providerResponse.country_code);
      } else {
        console.error('creationPhoneInput ref is undefined');
      }
    },
  }
}
</script>

Steps taken:

1. Ensured VueTelInput is correctly imported and registered.
2. Used await nextTick() to ensure DOM updates.
3. Added console logs to debug the presence of $refs.

Despite these efforts, the $refs is still undefined. Any help would be greatly appreciated!