Cropper rotating incorrect image in the array of images

I'm trying to navigate between multiple arrays of images which I want to render and rotate. Currently, while when I'm changing the selection from q-select, the images are rendering correctly, and if I print out the index in rotateImage it shows correct values for index, however when I click Rotate button on that index, it rotates the incorrect image in the array.

Note that when the app starts, it works correctly and rotates the correct image, however this issue of rotation of incorrect image in the array starts to happen once I start changing the selection in q-select.

   <q-select
          dense
          borderless
          filled
          style="max-width: 35%"
          v-model="selection"
          :options="Options"
        />
    <div
         v-for="(imageData, index) in selection"
              :key="`${selection}-${index}`"
            >
              <vue-cropper
                ref="cropper"
                :src="imageData"
                 ..
                :cropBoxMovable="false"
                :zoomable="true"
                @cropend=".."
              />
              <q-menu touch-position>
                <q-list style="min-width: 100px">
                  <q-item @click="rotateImage(index)" clickable v-close-popup>
                    <q-item-section>Rotate</q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup>
                    <q-item-section>Close</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </div>

..
<script setup>
..
const rotateImage = async (index) => {
  const cropperInstance = cropper.value[index];
  cropperInstance.clear();
  cropperInstance.initCrop();
  cropperInstance.rotate(90);

};

The problem is that a ref for a v-for is not guaranteed to stay in the same order as the array used by the v-for.

Easy approach is to add a uuid to each value in the array and then apply it to a component as a data- attribute. You can then use the uuid in the handler to search the instances in the ref for the correct one.

See last paragraph of this section of the docs:

https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for