the value in this line:

@input="value => emit('update:modelValue', value)"

will return an InputEvent object, that’s why you get that warning.

but I wrote your component in another way (it’s not best practice but it works)
I apologize for my messy code

here is my solution:

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { VueTelInput } from "vue-tel-input";
import "vue-tel-input/vue-tel-input.css";

// Props
const props = defineProps({
  modelValue: String,
});

// Events
const emit = defineEmits(["update:modelValue"]);

// Local State
const value = ref("");

// watch for change Local State
watch(value, (val) => {
  emit("update:modelValue", val);
});

// watch for change Props
watch(
  () => props.modelValue,
  (val) => {
    value.value = val;
  }
);

// set initial value
onMounted(() => {
  value.value = props.modelValue;
});
</script>

<template>
  <VueTelInput v-model="value"> </VueTelInput>
</template>

Update

you can install @vueuse/core package and then use useVModel hook

here is the modified code with this method:

<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import { VueTelInput } from "vue-tel-input";
import "vue-tel-input/vue-tel-input.css";

const props = defineProps<{modelValue: string}>()
const emit = defineEmits(['update:modelValue'])
const data = useVModel(props, 'modelValue', emit)

</script>

<template>
  <VueTelInput v-model="data"> </VueTelInput>
</template>

Reference: useVModel – @vueuse/core