Vue.js の同じ親を持つ v-for 使用の兄弟要素と key ディレクティブへの配列のインデックス指定について

Vue.js の v-for で配列を指定する際にキーを指定しないほうがよいらしい

Vue.js: v-forで項目インデックスをkey属性にしていいのか
追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振る

いままでばんばんつかってました・・・

親を同じくする兄弟要素がそれぞれに v-for で配列を記述する場合

配列のキーを使用しないほうがよいというのは前述の記事にて述べられているのですが
下記のような良くないパターンをあえて

duplicate-key.vue

<template>
  <div>
    <ul>
      <!-- list 使用一か所目 -->
      <li
        v-for="(number, index) in list"
        :key="index"
        >{{ number }}</li>
      <!-- list 使用二か所目 -->
      <li
        v-for="(number, index) in list"
        :key="index"
        >{{ number }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  }
};
</script>

同一の list を使用している li での v-for で
配列のキーを :key="index" として使用しております。

実行例にて確認すると下記のようなエラーが

[Vue warn]: Duplicate keys detected: '0'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '1'. This may cause an update error.
[Vue warn]: Duplicate keys detected: '2'. This may cause an update error.

GitHub での issue にて

• https://github.com/vuejs/vue/issues/7323

:key="it.id" として複数の要素に同じ :key を使用しようとしたらエラーが
仕方ないから suffix で対応した

• https://github.com/vuejs/vue/issues/7323#issuecomment-353959736

同じ ul の子に同じ :key の指定をしたら発生するしこれは期待される動き

前述の事例は同一の ul 中で :key がかぶったから発生したようです。

プレフィクスとして first- second- を付加して問題をなくした事例

not-duplicate-key.vue

<template>
  <div>
    <ul>
      <!-- list 使用一か所目 (first-) -->
      <li
        v-for="(number, index) in list"
        :key="`first-${index}`"
        >{{ number }}</li>
      <!-- list 使用二か所目 (second-) -->
      <li
        v-for="(number, index) in list"
        :key="`second-${index}`"
        >{{ number }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  }
};
</script>