v-forで要素数に変化があるときはkeyにindexを用いない【Vue.js】
備忘です。
v-forで要素数が変化(後で追加、削除を行う)する場合には、
keyにindexを用いてはいけないようです。
keyは要素の変更を、どのデータに対して行うべきか判別するために使われます。
v-forで生成されるindexをkeyに使った場合、要素の追加や削除によってindexが変更されるため、
アニメーションで追いかけられなくなってしまうようです。
下記で詳細に紹介されています。
Vue.js: v-forで項目インデックスをkey属性にしていいのか - Qiita
追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振る - Qiita
keyには連想配列を使用した固有のidを用い、要素追加の際のidは順にインクリメントするか、
使用されていない最大値を与える必要があります。