Why does the v-maska ​​library crash when updating a component?

Question

JavaScript

Hello, I am using the v-maska ​​library in a project.

<input
                v-maska="'+7 (###) ###-##-##'"
                type="text"
                :value="
                  person.contacts.phones.length > 0
                    ? person.contacts.phones[0]
                    : '-'
                "
                readonly
              />

The mask always flies when the component is updated. Wherever events are called that update this component, the mask flies and simply displays the number 79234445678 (the number was randomly written).

Just above there is a block with this code

<div
            v-if="person.directions.length > 3"
            :class="{ active: isShowMarks }"
            class="user-rating-title-right-more-wrapper"
            @click="showMarks"
          >
            <span v-if="!isShowMarks" class="user-rating-title-right-more" />
            <i v-else class="icon-close-directions"></i>
          </div>

This block shows/hides markers. On the @click="showMarks" event, the v-maska ​​flies to the input. I indicated this as an example, in general, if the updated event occurs, then the v-maska ​​flies.

I tried to force update the component again, tried to remove v-if and so on. But the result is the same, when the component is updated, the mask on the phone crashes.

Answer 1

I solved the problem, I didn’t understand why it works like this, but instead of : value on input, you need to bind v-model, then the library does not crash when the component is updated