V-model and materializecss M.FormSelect issue

Question

I have a materializecss select element with multiple options. I want to send selected option to server but I want to show some default option so I use v-model with variable set to the value of default option, when I select some other option and submit the form everything is ok. After submitting the form I set variable to the value of the option I want to show by default but it doesn't update.

Template

<select ref="select" v-model="state">
  <option value="State" disabled selected
  >Choose a state</option
  >
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

script

data: () => ({
  select: null,
  state: 'State'
)},
mounted() {
  this.select = M.FormSelect.init(this.$refs.select, {});
  M.updateTextFields();
},
methods: {
  async submitHandler() {
    try {

      // here I upload data on server (lots of code) 
      // and after it's uploaded I clear all fields

      this.state = 'State' // I set it back to default option value
    }
    catch (e) {}
 }
}

But it doesn't update ((( I'm new to vuejs but I'm trying my best to understand what happens and why it doesn't set up to default option even after the model is changed. I see in developer tools in vue extension that the value of this.state is set back to 'State' but the options is still the last chosen. Help me please wise men. I really love VueJS but in situations like this it piss me off. I know the problem is somewhere in materializecss. The sad thing is that there's no method to set the value of M.FormSelect manually.

Answer 1

I found a hack with jQuery but I didn't want to use jQuery in my code just for one task. So I simply used browser-default class for select component and copied all materializecss select tag styles in style section of the component. And it still looks amazing but now it works!