Vue.js computed 속성 변경 시키기

부모 컴포넌트에서 자식 컴포넌트로 object 타입의 값을 넘겨주고 그 값을 computed 속성에서 조작하도록 했는데 부모값이 변경될 때마다 자식의 값이 따라서 변경되지 않았다.

공식 문서를 살펴보니 객체와 배열은 참조로 전달되기 때문에 해당 참조값이 변경되지 않는 이상은 computed 속성에서 값이 변했다고 인식하지 않는듯 하다. 부모 컴포넌트에서 값이 변경될 때는 기존의 object에 값을 추가하는 형식으로 데이터를 변경 시켰기에 참조값을 동일했을 것이다.

자바 스크립트의 객체와 배열은 참조로 전달되므로 prop가 배열이나 객체인 경우 하위 객체 또는 배열 자체를 부모 상태로 변경하면 부모 상태에 영향을 줍니다.
출처 : vuejs 공식 홈페이지

해결은 객체에 값이 추가되거나 삭제될 때마다 객체의 얕은 복사를 통해 참조값 자체를 바꿔주어 자식 컴포넌트의 computed 속성에서 데이터가 계속해서 변경되었다고 인식하도록 했다. 더 효율적인 방법이 있을 것 같긴 한데, 우선 1차 구현은 위와 같이 했다.