How to disable a <md-select> in <md-field> on VueJS Material

Question

<md-select> is shown when I click <md-field> component.

And <md-select> component is turn off when I click outside area of <md-field>.

I want to turn off <md-select> component when I click some button.

How can I add custom event for turn off <md-select> component?

This is a document link for select component.
Vue Material - Select

And this is a template.

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

Answer 1

You can add a button and add click event

<button @click="disableButtonClicked">Click to disable</button>

Then you can change your component's variable let's call it isDisabled

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie"  :disabled="isDisabled" ref="mdSelect">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

or you can use its ref like

this.$refs.mdSelect 

and then do which action you want.