Это кажется довольно чистым решением от matthiasg on этот вопрос:

вы также можете использовать :key="someVariableUnderYourControl" и измените ключ, когда вы хотите, чтобы компонент был полностью перестроен

для моего случая использования я подавал геттер Vuex в компонент в качестве опоры. Каким-то образом Vuex будет получать данные, но реактивность не будет надежно срабатывать, чтобы повторно передать компонент. В моем случае, установка компонента key в какой-то атрибут на опоре гарантировал обновление, когда геттеры (и атрибут), наконец, разрешены.

использовать vm.$set('varName', value). Ищите детали в Change_Detection_Caveats.

почему?

...вы нужно для принудительного обновления?

возможно, вы не исследуете Vue в лучшем виде:

чтобы иметь Vue автоматически реагировать на изменения значений, объекты должны быть первоначально заявленной в data. Или, если нет, они должны быть добавить с помощью Vue.set().

см. комментарии в демо ниже. Или откройте то же самое демо в JSFiddle здесь.

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

чтобы освоить эту часть Vue, проверьте официальные документы на активность - Предупреждение Об Обнаружении Изменений. Это надо обязательно прочитать!

попробуйте использовать this.$router.go(0); чтобы вручную перезагрузить текущую страницу.

Я нашел способ. Это немного хаки, но работает.

vm.$set("x",0);
vm.$delete("x");

здесь vm это ваш вид-модель объекта, и x-это несуществующая переменная.

Vue.js будет жаловаться на это в журнале консоли, но он запускает обновление для всех данных. Протестировано с версии 1.0.26.

вы можете заставить пользовательский интерфейс рендеринга: этот.$forceUpdate();

С помощью директивы v-if

<div v-if="trulyvalue">
    <component-here />
 </div>

таким образом, просто изменив значение trulyvalue с false на true, компонент между div снова повторится

конечно .. вы можете просто использовать ключевой атрибут для принудительной рендеринга (воссоздания) в любое время.

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

см.https://jsfiddle.net/mgoetzke/epqy1xgf/ для примера

это также обсуждалось здесь:https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875