Error in Vue.js When Looping Through ol-overlay Component with a Key

[amipei]

Describe the bug
Certainly! Here's the translation of the sentence you provided:

"If you loop through the ol-overlay component using an array and provide a key, it will cause an error in Vue."

It appears to describe a situation where iterating over an "ol-overlay" component with an array and providing a key might lead to an error within a Vue.js application. If you need further assistance or explanation, feel free to ask!

Affected version(s)

 "vue": "^3.2.47",
 "vue3-openlayers": "1.2.0"

To Reproduce
1、Create an array, for example: [1,2,3].
2、Use this array to loop through and render the "ol-overlay" component.
3、Change the array to: [3, 1, 5].

Expected behavior
render the content corresponding to the new array.

Screenshots

Desktop

• Browser [e.g. chrome:115.0.5790.170 ]

Additional context

<ol-overlay
    :position="[item * 10 + 40, 40]"
    v-for="item in list "
    :key="item"
  >
    <template v-slot="slotProps">
      <div class="overlay-content">
        {{ item }}
      </div>
    </template>
</ol-overlay>

const list = ref([1, 2, 3]);
const changeList = () => {
    a.value = [3, 1, 5];
};

[amipei]

If I wrap the ol-overlay component in a div element and then loop through it, this error will not occur.

<div  v-for="item in list " :key="item">
<ol-overlay :position="[item * 10 + 40, 40]">
    <template v-slot="slotProps">
      <div class="overlay-content">
        {{ item }}
      </div>
    </template>
</ol-overlay>
</div>

[d-koppenhagen]

Hey, I just tried it and updated the example (demo). However, I could not reproduce the described problem. Can you re-try it and if it doesn't work reopen the issue with more detailled information? Ideally, you can provide a minimal reproduction playground by using the Stackblitz Starter Template.

<template>
  <ol-map style="height: 400px">
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-overlay
      :position="[item + 37.9, 40.1]"
      v-for="item in list"
      :key="item"
    >
      <div class="overlay-content">
        {{ item }}
      </div>
    </ol-overlay>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
const list = ref([2, 1, 3, 5, -1]);
</script>

<style>
.overlay-content {
  background: #efefef;
  box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
  padding: 10px 20px;
  font-size: 16px;
}
</style>