Vue компонент рендеринга при нажатии кнопки сброса

Question

У меня есть кнопка сброса, которая сбрасывает состояние до начальных значений. Мне нужно изменить компонент с помощью currentTab. Есть ли способ сделать это?

<button @click="resetData">reset</button>

<keep-alive>
    <component :is="currentTab"></component>
</keep-alive>

methods: 
resetData() {
    this.$store.dispatch('resetData')
    // re-render component based on the currentTab
    ??
}

currentTab Я получаю из списка вкладок:

tabs: [One, Two, Three]

Answer 1

Есть несколько способов форсировать рендер. Чтобы сделать это от родителя, установите key для ребенка. Изменение ключа приведет к повторному воспроизведению дочернего элемента:

HTML:

<component :is="currentTab" :key="tabKey"></component>

В родительском ключе укажите ключ как число:

data() {
  return {
    tabKey: 0
  }
}

Изменить key:

methods: {
  resetData() {
    this.tabKey++;
  }
}

Примечание. Использование this.$forceUpdate внутри компонента вызовет только повторное отображение его вида.