Controlling reusable elements with key attributes

For the sake of providing better performance, we have discovered that Vue always reuses DOM nodes instead of rendering anew, and this can have some undesirable results, as demonstrated in the previous section. Here is another example without v-for to demonstrate why having the key attribute is rather important:

<div id="app">
  <template v-if="type === 'fruits'">
    <label>Fruits</label>
    <input />
  </template>
  <template v-else>
    <label>Vegetables</label>
    <input />
  </template>
  <button v-on:click="toggleType">Toggle Type</button>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: { type: 'fruits' },
    methods: {
      toggleType: function () {
        return this.type = this.type === 'fruits' ? 'vegetables...