vue、可変配列でvforを使用してキー値をインデックス化する場合に問題が発生します

Toyプロジェクト中にv-forで作成したリストの削除関数にエラーが発生しました.
位置が絶対位置でlistitem 1と同じlistitem 2が存在する場合、1人のやつを削除し、結果として2が1の位置に消えてしまうのがバグです.
いろいろな関数を検索するのに約2時間かかりましたが、問題が見つからなかった場合、開発者のツールでelementの変化をよく観察すると、listitem 1を削除するとlistitem 1のelementが削除され、listitem 2ではなく上に移動することがわかりました.Listitem 2は削除され、listitem 1のidまたはコンテンツはlistitem 2の情報に置き換えられていますが、他の関数の任意の位置値を除きます.

????????
これが何なのか考えていたら、「まさか」と答えが変わった.ある場所で、先生はやはりYouTubeで必ずkey値を使うと聞いていましたが、単純なindexではなく、独特の値を使うということで、理由は聞いていませんでしたが、その問題に直接遭遇するとは思いませんでした.

  <div id="app">
    <!-- index를 key로 사용한 v-for -->
    <h1 style="position: absolute;">index key</h1>
    <div
    v-for="(n, i) in list1" :key="i"
    :style="{backgroundColor : n.color}" style="position: absolute; width: 200px; height: 190px;"
    class="div1">
      {{n.name}} <button @click="remove(n.id)">삭제</button>
    </div>

    <!-- 문자열 + id값을 key로 사용한 v-for -->
    <h1 style="position: absolute; left: 220px;">no index key</h1>
    <div
    v-for="(n, i) in list2" :key="n.id"
    :style="{backgroundColor : n.color}" style="position: absolute; width: 200px; height: 190px; left:220px;"
    class="div2">
      {{n.name}} <button @click="remove2(n.id)">삭제</button>
    </div>
  </div>

v-forを使用して作成された2つのリスト

作成された画面

	new Vue({
      el : "#app",
      data: {
        list1 : [
          {name : "첫번째 박스", id : 0, color: "red"},
          {name : "두번째 박스", id : 1, color: "blue"},
          {name : "세번째 박스", id : 2, color: "green"},
          {name : "네번째 박스", id : 3, color: "orange"}
        ],
        list2 : [
          {name : "첫번째 박스", id : 0, color: "red"},
          {name : "두번째 박스", id : 1, color: "blue"},
          {name : "세번째 박스", id : 2, color: "green"},
          {name : "네번째 박스", id : 3, color: "orange"}
        ],
      },
      methods: {
        // 삭제 메소드
        remove(id) {
          this.list1.forEach((element , i)=> {
            if (element.id == id) {
              this.list1.splice(i, 1)
            }
          });
        },
        remove2(id) {
          this.list2.forEach((element , i)=> {
            if (element.id == id) {
              this.list2.splice(i, 1)
            }
          });
        }
      },
    })

    // 외부에서 정해주는 위치값
    let div = document.getElementsByClassName('div1')
    for (let i = 0; i < div.length; i++) {
      div[i].style.top = 100 + (190 * (i)) + 'px'
    }

    let div2 = document.getElementsByClassName('div2')
    for (let i = 0; i < div2.length; i++) {
      div2[i].style.top = 100 + (190 * (i)) + 'px'
    }

vueコードと位置値を決定するJavaScript

ここで2つ目の箱を別々に削除すると、こうなります.