https://v3.ko.vuejs.org/guide/list.html#배열-변경-감지

위 사이트에서 설명 하듯이 변이 메소드들은 원본의 배열을 변경한다. 
그리고 변이 메소드들은 반응성을 가진다.
그렇지만 filter, concat, slice 같은 새 배열을 반환하는 비-변이 메소스도 있다.

이런 것들은 기존의 배열에 다시 할당 해 주면 마찬가지로 반응성을 가지게 된다.
그렇다고 기존 DOM 을 버리고 다시 렌더링 하는것이 아니다.

Vue 는 기존의 DOM 요소 재사용을 최대화 하기 위해 몇가지 똑똑한 방법을 사용한다.

$ npm i -D shortid // 고유한 키 값을 만들어주는 패키지

// Click me! 를 통해 Orange 를 push 해 주는 반응성을 가지고 있다.

<template>
  <button @click="handler">
    Click me!
  </button>
  <ul>
    <li
      v-for="{ id, name } in newFruits"
      :key="id">
      {{ name }}-{{ id }}
    </li>
  </ul>
</template>

<script>
import shortid from 'shortid'

export default {
  data() {
    return {
      fruits: ['Apple', 'Banana', 'Cherry', 'Apple'],
    }
  },
  computed: {
    newFruits() {
      return this.fruits.map(fruit=> ({
        id: shortid.generate(),
        name:fruit
      }))
    }
  },
  methods: {
    handler() {
      this.fruits.push('Orange')
    }
  }
}
</script>