Duplicate keys detected: '0'. This may cause an update error.

フォーム要素を表示すると

下記のように、v-forで複数要素を表示しようとした。

.vue

<el-form>
  <!-- 要素 ① -->
  <div v-for="(item, index) in data1" :key="index">
      <el-form-item>
        <!-- 略 -->
      </el-form-item>
    </ui-allowed-domain>
  </div>
  <!-- 要素 ② -->
  <div v-for="(item, index) in data2" :key="index">
      <el-form-item>
        <!-- 略 -->
      </el-form-item>
    </ui-allowed-domain>
  </div>
</el-form>

要素②を追加したところ・・

このようなエラーが発生。

親要素を変えるか、keyにプレフィックスを与える

原因を調べてみると、どうやら同一の親要素の直下にある要素同士がkeyにindexを使った場合、「キーが重複している」とエラーを出すようになっているらしい。

解決方法は、div要素などで囲ってあげることで親要素を変える。
または下記のようにプレフィックスをindexにつけることで、indexをユニークにする。

要素①
:key="`form-1-${index}`"

要素②
:key="`form-2-${index}`"