Typed phone number is erased after one letter

[kamilwylegala]

Hey, I stumbled upon one issue during migration to Vue3 version of the component.

Component is mounted accordingly to the docs. But typed phone number doesn't show up in the input. I type one number in input, and after another hit in the keyboard number gets erased. I'm unable to type full number.

I copied the source code of the VueTelInput into my project and debugged the issue. It's coming from having both bindings of v-model="phone" and :value="modelValue" on <input>. Always when phone gets updated it gets overridden later with modelValue that has previous state of the phone number. Although in my Vue 3 setup I'm using Options API, not sure if it's related.

Is there any particular reason why both :value and v-model are needed?

If I do following:

 <input v-model="phone"
           ref="input"
           :type="inputOptions.type"
           :autocomplete="inputOptions.autocomplete"
           :autofocus="inputOptions.autofocus"
           :class="['vti__input', inputOptions.styleClasses]"
           :disabled="disabled"
           :id="inputOptions.id"
           :maxlength="inputOptions.maxlength"
           :name="inputOptions.name"
           :placeholder="parsedPlaceholder"
           :readonly="inputOptions.readonly"
           :required="inputOptions.required"
           :tabindex="inputOptions.tabindex"
-          :value="modelValue"
           :aria-describedby="inputOptions['aria-describedby']"
           @blur="onBlur"
           @focus="onFocus"
           @input="onInput"
           @keyup.enter="onEnter"
           @keyup.space="onSpace" />

component works perfectly fine.

Thanks for the answer in the advance.