Place the v-for loop directly on .cell-item in GridDisplay.vue and...

Place the v-for loop directly on .cell-item in GridDisplay.vue and GridEditor.vue, add a key to the loop in GridDisplay.vue

partials/GridDisplay.vue

@@ -3,9 +3,8 @@
   div.cell-grid-container(ref="gridContainer", @scroll="onScroll")
     q-window-resize-observable(@resize="updateGridDimensions")
     div.cell-grid(:style="gridStyle")
-      template(v-for="(annotation, index) in data.annotations")
-        .cell-item(:style="getAnnotationStyle(annotation)")
-            cell(:annotation="annotation", display="display", :locked="locked")
+      .cell-item(v-for="annotation in data.annotations" :style="getAnnotationStyle(annotation)" :key="annotation.id")
+          cell(:annotation="annotation", display="display", :locked="locked")
 
       //template(v-if="!isMobile")
         q-page-sticky(position="top-right", :offset="[18, 18]", v-if="$store.state.auth.user")

partials/GridEditor.vue

@@ -80,37 +80,35 @@
               q-item-main(:label="action.label")
 
       //---------------------------------------------------------------------------------------------------------- cells
-      template(v-if="data.annotations", v-for="(annotation, index) in data.annotations")
-        // v-touch-pan="event => { panCell(event, annotation) }",
-        // draggable="true",
-        // v-if="!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation._uuid].beingDragged",
-        .cell-item(
+
+      .cell-item(
+        v-if="data.annotations", v-for="(annotation, index) in data.annotations"
         @contextmenu="handleCellContextMenu",
         :style="getCellStyle(annotation)",
         :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
         :key="`cell-${index}`")
 
-          //----- content
-          // v-touch-hold="event => {editCell(event, annotation)}",
-          cell.absolute.fit(
-          v-touch-hold="event => { if (mayEdit) holdCell(event, annotation) }",
-          @click.native="event => { if (mayEdit) selectCell(event, annotation) }",
-          :annotation="annotation",
-          :preview="true")
-
-          // is needed to prevent click-event after panning
-          // .absolute.fit(v-if="pannedCell.panned")
-
-          //----- context menu: cells
-          // TODO: needs revision
-          q-context-menu.desktop-only.bg-grey-3.text-dark(v-if="mayEdit")
-            q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
-              q-item(
-              v-for="action in cellContextMenuActions",
-              :key="action.label",
-              v-close-overlay,
-              @click.native="event => {action.handler(event, annotation)}")
-                q-item-main(:label="action.label")
+        //----- content
+        // v-touch-hold="event => {editCell(event, annotation)}",
+        cell.absolute.fit(
+        v-touch-hold="event => { if (mayEdit) holdCell(event, annotation) }",
+        @click.native="event => { if (mayEdit) selectCell(event, annotation) }",
+        :annotation="annotation",
+        :preview="true")
+
+        // is needed to prevent click-event after panning
+        // .absolute.fit(v-if="pannedCell.panned")
+
+        //----- context menu: cells
+        // TODO: needs revision
+        q-context-menu.desktop-only.bg-grey-3.text-dark(v-if="mayEdit")
+          q-list(link, separator, no-border, style="min-width: 150px; max-height: 300px;")
+            q-item(
+            v-for="action in cellContextMenuActions",
+            :key="action.label",
+            v-close-overlay,
+            @click.native="event => {action.handler(event, annotation)}")
+              q-item-main(:label="action.label")
 
       //--------------------------------------------------------------------------------------------------- move handler
       template(v-if="mayEdit")