v-mask not working correctly with veutify input

I’m using veutifyjs text-input to show phone number. I have a button to assign phone number to v-model. But after assign it not change there text input. if I enter some think on text-input v-mask work. But if I assign value to v-model it not working. Also i’m tying next trick but its not have any difference.

 <v-text-field
          v-model="form.phone_number"
          v-mask="'(###) ###-####'"
          dense
          outlined
          autocomplete="new-password"
          hide-details="auto"
          label="Phone Number"
          placeholder="Phone Number"
        ></v-text-field>

   <v-btn color="warning" @click="dataupdate()">Add</v-btn>

dataupdate() {
      this.$nextTick(() => {
        this.form.phone_number = '4032223344'
      })
    },

[davidkhess]

A workaround for this is to put a v-if on the Vuetify text field and toggle it after setting the model value like this:

 <v-text-field
          v-if="text_field_enabled"
          v-model="form.phone_number"
          v-mask="'(###) ###-####'"
          dense
          outlined
          autocomplete="new-password"
          hide-details="auto"
          label="Phone Number"
          placeholder="Phone Number"
        ></v-text-field>

                this.form.phone_number = value;
                this.text_field_enabled = false;
                this.$nextTick(() => { this.text_field_enabled = true; });

It’s a hack but the directive is not hooking to the model and listening for value changes correctly.

[alxxnder]

Everything is much simpler, I ran into it myself and decided.

The fact is that vuejs cannot understand when the state changes, or rather when to render the component again, and needs a little help for it.

It is enough to remember about the key. After assigning a new value, you need to change the key. Vue will notice that the key will change in the virtual tree and re-render part of the code.

Using of v-bind:key solved the issue, great hint!