Vue. Как очистить поля входного файла при переключении радиокнопок (компонент vuetify v-file-input)?

Question

Я пытаюсь отобразить поля для загрузки файлов по шагам и переключателям.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
      e6: 1,
      radios: 'Org',
  }, 
  methods: {
      typeEnt (e) {
        //console.log(e);
      },
      clearAll() {
        this.e6 = 1;
        this.radios = false;
        this.$refs.rootDiv.scrollIntoView();
      }
    },
})

<div id="app" ref="rootDiv">
    <v-app id="inspire">
        <v-stepper v-model="e6" vertical>
            <v-stepper-step :complete="e6 > 1" step="1">
                Step1
                <small>{{radios || '— null —'}}</small>
            </v-stepper-step>
            <v-stepper-content step="1">
                <v-container fluid>
                    <v-radio-group v-model="radios" :mandatory="false" @change="typeEnt">
                        <v-radio label="Org" value="Org"></v-radio>
                        <v-radio label="Broker" value="Broker"></v-radio>
                    </v-radio-group>
                </v-container>
                <v-container fluid v-if="radios == 'Org'">
                    <div class="v-card">
                        <div class="v-card__title">Title1</div>
                        <div class="v-card__text">
                            <v-file-input small-chips show-size label="File upload 1.1" accept="application/pdf"></v-file-input>
                            <v-file-input small-chips show-size label="File upload 1.2" accept="application/pdf"></v-file-input> 
                        </div>
                    </div>                        
                </v-container>
                <v-container fluid v-if="radios == 'Broker'">
                    <div class="v-card">
                        <div class="v-card__title">Title2</div>
                        <div class="v-card__text">
                            <v-file-input small-chips show-size label="File upload 2.1" accept="application/pdf"></v-file-input>
                            <v-file-input small-chips show-size label="File upload 2.2" accept="application/pdf"></v-file-input> 
                        </div>
                    </div>
                </v-container>
                <v-btn color="primary" @click="e6 = 1">Continue</v-btn>
                <v-btn text @click="clearAll()">clearAll</v-btn>
            </v-stepper-content>
        </v-stepper>
    </v-app>
</div>

При переключении переключателей во входных файлах старые значения остаются. Как очистить входные файлы?

https://codepen.io/OlegF/pen/XWmEWJJ?editors=1111

Answer 1

Вы можете использовать Watcher для выполнения функции каждый раз, когда radios изменяет значение.

 watch: {
    radios() {
      this.$refs.filerr.reset();
    }
  }