Intl-tel-input for Vue 3 using composition API and custom input

ExampleCustomInput.vue

<template>
  <div class="custom-input">
    <label class="custom-input__label" :for="`input-${id}`">
      <slot>Input</slot>
    </label>
    <div class="mt-1">
      <input
        :id="`custom-input-${id}`"
        :type="type"
        :required="required"
        @input="onInput($event.target.value)"
        class="custom-input__input"
        :value="modelValue"
        :placeholder="$attrs.placeholder"
        ref="inputElement"
      />
    </div>
    <div class="custom-input__error-msg" v-if="errorMessage && hasError">{{ errorMessage }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'custom-input',
  setup() {
    const inputElement = ref(null)
    
    function onInput(value: string) {
      this.$emit('update:modelValue', value)
    }
    
    return {
      inputElement,
      onInput
    }
  },
  props: {
    id: {
      required: true,
      type: String
    },
    type: {
      default: 'text',
      type: String
    },
    required: {
      default: false,
      type: Boolean
    },
    modelValue: {
      type: [String, Number]
    },
    hasError: {
      type: Boolean,
      default: false
    },
    errorMessage: {
      type: String
    }
  },
  emits: ['update:modelValue']
})
</script>

<style lang="scss">
// apply your styles
</style>

Vue3IntlInput.vue

<template>
  <div class="custom-tel-input">
    <CustomInput
      ref="input"
      type="tel"
      :id="id"
      :modelValue="modelValue"
      @update:modelValue="onInput"
    >
      <slot>Contact Number</slot>
    </CustomInput>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import 'intl-tel-input/build/css/intlTelInput.css'
import intlTelInput from 'intl-tel-input'
import CustomInput from '@/components/atoms/common/Custominput.vue'

export default defineComponent({
  name: 'fem-m-tel-input',
  setup(_, { emit }) {
    const input = ref()

    const telInput = ref()

    const isValidNumber = ref(false)

    onMounted(() => {
      const inputElement = input.value.inputElement
      telInput.value = intlTelInput(inputElement, {
        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js',
        preferredCountries: ['gb']
        // your options
      })
    })

    const hasError = computed(() => {
      return props.isDirty && !isValidNumber.value
    })

    function onInput() {
      const formattedNumber = telInput.value.getNumber()
      isValidNumber.value = telInput.value.isValidNumber()
      
      emit('update:modelValue', formattedNumber)
    }

    return {
      input,
      onInput,
      telInput,
      isValidNumber,
      hasError
    }
  },
  props: {
    id: {
      type: String
    },
    modelValue: {
      type: [String, Number]
    }
  },
  emits: ['update:modelValue'],
  components: {
    CustomInput
  }
})
</script>

Thanks this helped me get this done quickly

hey @Jamiewarb did encounter undefined input its not really working here how did u handle this