[vue2] 드래그앤드랍 시 반응성 업데이트 안됨

문제 상황

드래그앤 드랍 테이블 간 row이동에 대해 이벤트가 발생하지 않는다
기대하는 이벤트는 vuedraggable 컴포넌트의 'change' 이벤트, 테이블의 내용이 바뀔 때 발행된다.

원인

기존 코드는 groups 배열에 대해 v-for 루프를 돌고 있음에도, key를 사용하지 않고 있었다. 그래서 :key="JSON.stringify(group)" 이렇게 key를 넣어준 시점에서 이벤트가 발생하지 않았다

추론한 원인으론

• key 길이가 너무 길다 (group의 직렬화 버전은 매우 길다)
• key가 dynamic하다 (group.items가 바뀌니 이를 stringify한 key도 바뀜)
  이었다.

실제 원인은
드래그앤드랍으로 인해 group 값이 바뀌어서, JSON.stringify(group) 키 값이 계속 바뀌는 것이었음.

v-for 의 key 값은 해당 컴포넌트만 가지고 있는 값이면 된다고 잘못 생각했던것이 문제였음.
v-for의 key 값은 identical 해야할 뿐 아니라, static 해야한다.