Cleanest way to re-render component in Vue - vue.js

Question

I have a Keyboard.vue component containing many Key.vue child component instances (one for each key).
In Key.vue, the key is actually a html <button> element that can get disabled.
By clicking a certain button in my app, I want to reset keyboard and make all keys enabled again. I thought that setting a v-if to false then to true again (<keyboard v-if="BooleanValue" />) would re-render Keyboard.vue and all its Key.vue child component instances.
It doesn't. Why not?
App.vue
<template>
<div class="app">
...
<keyboard v-if="!gameIsOver && showKeyboard" />
...
</div>
</template>
<script>
export default {
components: {
Keyboard
},
computed: {
gameIsOver () {
return this.$store.state.gameIsOver
},
showKeyboard () {
return this.$store.state.showKeyboard
}
}
Keyboard.vue
<template>
<section>
<key class="letter" v-for="(letter) in letters" :key="letter" :letter="letter" />
</section>
</template>
Key.vue
<template>
<button :disabled="disabled" #click="checkLetter(letter)">
{{ letter }}
</button>
</template>
<script>
export default {
...
data () {
return {
disabled: false
}
}
My button resetting keyboard triggers:
this.$store.commit('SET_KEYBOARD_VISIBILITY', false)
this.$store.commit('SET_KEYBOARD_VISIBILITY', true)

Answer 1

To answer your question first, the cleanest way to re-render a Vue component or any element is to bind it's key attribute to something reactive that will control the re-renders, whenever the key value changes it will trigger a re-render.
To make such a unique key per render, I would probably use an incremented number and whenever I would like to re-render I would increment it.
<template>
<div>
<div :key="renderKey">
</div>
</div>
</template.
<script>
export default {
data: () => ({
renderKey: 0
}),
methods: {
reRender() {
this.renderKey++;
}
}
};
</script>
Now as for why toggling v-if didn't work: Toggling a reactive property between true and false doesn't necessarily trigger 2 re-renders because Vue has an async update queue which applies DOM changes in patches in certain time frames, not per individual update. This why Vue is so fast and efficient.
So you trigger disabled to false, then to true. The renderer will decide not to update the DOM because the final value has not changed from the last time, the timing is about 16ms If I recall correctly. So you could make that work by waiting more than 16ms between toggling your prop between true and false, I say "could" but not "should".

Answer 2

The cleanest way is to have the disabled state somewhere where you can reset it, because re-rendering your component to reset it is making use of a side-effect of destroying and re-creating your components. It makes it hard for someone to figure out why the buttons are enabled again, because there is no code changing the disabled variable to false anywhere that is being called when you rerender.
That said, you see your current behaviour because Vue aggregates all changes of the current "tick", and only rerenders at the end of that tick. That means if you set your variable to false, then to true, it will only use the last value.
// Nothing happens
this.showSomething = false
this.showSomething = true
To force it to re-render, you can use the trick Amitha shows, using key. Since Vue will use an instance per key value, changing the key will destroy the old one and create a new one. Alternatively, you can use this.$nextTick(() => { ... }) to force some of your code to run on the next tick.
// Destroy all the things
this.showSomething = false
this.$nextTick(() => {
// Okay, now that everything is destroyed, lets build it up again
this.showSomething = true
});

Answer 3

Could you please give a try to set a :key for keyboard like below
<keyboard v-if="!gameIsOver && showKeyboard" :key="increment" />
"increment": local component property
and increase the "increment" property value by one when you need to re-render view. use the vuex store property to sync with local "increment" property.
how to sync vuex value changes with local property: add a "watcher" to watch the vuex store property changes and assigned that change to the local "increment" property which we setted as the "key" for keyboard