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