[Issue][<MazPhoneNumberInput>Lag in certain conditions

[Radu Vasile Catalin]

I try to make a global phone number component based on your phone component as I don't want to repeat my config each time
This work when I use the component directly inside my form file

                <MazPhoneNumberInput v-model="form.phone" />

but if I change my set-up, and add this to my form file

                <PhoneNumberInput v-model="form.phone" />

and the content of PhoneNumberInput is

  import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'

<script setup lang="ts">

const props = defineProps<{
    modelValue: string;
}>();
const emits = defineEmits(["update:modelValue"]);
</script>

<template>
    <MazPhoneNumberInput :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)">
    </MazPhoneNumberInput>
</template>

The input becomes just so slot / bugged that I am unable to use it. It skips some keystrokes entirely and some functions such as select all then back arrow does not work anymore

[Radu Vasile Catalin]

Update: this is the cause :value="modelValue"

[Mazel]

With Vue 3, you must use model-value instead of value and @update:model-value event instead of @input.

<template>
    <MazPhoneNumberInput 
      :model-value="modelValue" 
      @update:model-value="$emit('update:modelValue', $event)"
    />
</template>

---

Tips : You can use a computed with a getter and a setter and keep the v-model directive

<template>
    <MazPhoneNumberInput 
      v-model="phoneNumber" 
    />
</template>

<script setup lang="ts">
  import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'

  const props = defineProps<{
    modelValue?: string;
  }>();
  
  const emits = defineEmits(['update:model-value']);
  
  const phoneNumber = computed({
    get: () => props.modelValue,
    set: (value: string) => {
      emits('update:model-value', value)
    },
  })
</script>