add ids, missing :keys...

app/src/components/AudioArea.vue

@@ -59,6 +59,7 @@ export default defineComponent({
 });
 
 export interface AudioAreaDef {
+  id: string,
   cx: number,
   cy: number,
   radius: number,

app/src/components/SVGContent.vue

@@ -5,10 +5,10 @@
     </div>
     <div class="content" ref="root">
       <div class="video-scrolls">
-        <VideoScroll v-for="scroll in scrolls" :definition="scroll" />
+        <VideoScroll v-for="scroll in scrolls" :definition="scroll" :key="scroll.id"/>
       </div>
     </div>
-    <AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox" />
+    <AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox" :key="audio.id"/>
     <div class="dev devpanel">
       <div>
         <span>Current viewport position:</span>
@@ -500,6 +500,7 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
         }
 
         return {
+          id: el.id,
           top: y * ratio,
           left: x * ratio,
           angle,
@@ -540,6 +541,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
       el.classList.add("internal");
 
       return {
+        id: el.id,
         cx: el.cx.baseVal.value,
         cy: el.cy.baseVal.value,
         radius,

app/src/components/VideoScroll.vue

@@ -12,7 +12,8 @@
     />
 
     <!--suppress RequiredAttributes -->
-    <img v-for="file in dynamicFiles"
+    <img v-for="(file, idx) in dynamicFiles"
+         :key="`${idx}_${file.src}`"
          :data-src="file.src"
          :style="{
              top: `${Math.round(file.top)}px`,
@@ -106,6 +107,7 @@ export enum VideoScrollDirection {
 }
 
 export interface VideoScrollDef {
+  id: string,
   top: number,
   left: number,
   angle: number,