[Vuejs]-Updating the list and re-render the vue-template

new Vue({
  el: "#app",
  
  data: () => ({
type: 'fruits',
fruits: ['apple', 'banana', 'cherry'],
animals: ['cat', 'dog', 'rabbit'],
  }),
  
  computed: {
list() {
  return {
    fruits: this.fruits,
    animals: this.animals
  }[this.type]
}
  },
  
  methods: {
change(type){
  this.type = type
}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click.prevent="change('animals')">
    Animals
  </button>
  <button @click.prevent="change('fruits')">
    Fruits
  </button>
  
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>