객체 변경

때로는 Object.assign()이나 _.extend()를 사용해 기존의 객체에 새 속성을 할당할 수 있다. 이 경우 두 객체의 속성을 사용해 새 객체를 만들어야 한다.

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

---

Vue.set(object, propertyName, value) 메소드를 사용하여 중첩된 객체에 반응형 속성을 추가할 수 있다

<script>
      const vm = new Vue({
        el: '#app',
        data: {
          todos: [
            { title: '아침 먹기' },
            { title: '점심 먹기' },
            { title: '저녁 먹기' }
          ]
        },
        methods: {
          pushTodo() {
            // this.todos[3] = { title: '야식먹기' }
            // this.todos.push({ title: '야식먹기' })
            Vue.set(this.todos, 3, { title: '야식먹기!' })
          }
        }
      })
    </script>

인스턴스 메소드인 vm.$set를 사용할 수도 있다. 이는 전역 Vue.set의 별칭이다

methods: {
          pushTodo() {
            // this.todos[3] = { title: '야식먹기' }
            // this.todos.push({ title: '야식먹기' })
            this.$set(this.todos, 3, { title: '야식먹기!' })
          }
        }

Vue.set(this.todos, 3, { title: '야식먹기!' })을 이렇게 변경해도 똑같이 작동한다