Vue.js v-forで作られるVueインスタンスのライフサイクルの話

この部分はPokemon.vueをv-forで並べています。
タイプ別にtitleとtext部分に背景色をつけているんですが、検索などでv-forに使っているリストが増減したときに正しく背景色がつかない問題がありました。
わかったのでメモ。

v-forでVueインスタンスを追加する場合

通常のインスタンス生成が行われる

v-forに使っているリストの内容が変化した場合

Mounted→Virtual DOM re-render and patch
が起きる

今回の事象

key値がリストのindexのv-forにて、リストにフィルターをかけた際に、フィルター前のindexのclassを同じindexのフィルター後のコンポーネントが引き継いでしまっていた。
上記のライフサイクルより、createdとupdatedでclassを設定するようにしたら解決。

        created() {
            this.setPokemonClass();
        },
        updated() {
            this.setPokemonClass();
        }

所感

書いてて思ったけどv-forのkey値にindexじゃなくリストの持つ一意なパラメータを利用した場合、Vueインスタンスの再利用は行われずリストの増減に合わせてVueインスタンスの生成・破棄だけ行われたりするんだろうか。