Dynamically assigning a function prop on a Vue component

I'm using the vue-cropperjs wrapper, and rendering a list of these components using a v-for

 <div v-for="(data, index) in mylist"
        :key="index">
      
        <vue-cropper
          :view-mode="2"
          :zoomable="true"
          :scalable="true"
          ref="cropper"
          :src=".."
          @cropend=".."/>
        
      </div>

This ref=cropper is a reactive variable/composable that I have access to in another component as well. I'm not setting the @ready function prop in my vue-cropper above because I don't care for running a method on all croppers, however, if in another component user does action X for an index i, I do want to set the data using setData method on that particular vue-cropper instance like cropper.value[index].setData({data}), but this does not work and I suppose this is because the cropper on that index is not ready yet as per cropper-js documentation.

How do I from another component's script, without setting a ready property on my v-for loop for all vue-croppers, instead execute this cropper.value[index].setData() method after that particular cropper is ready when I'm calling this.

I tried doing this, however this does not seem to work in Vue 3, and I'm getting a .$on is not a function error:

cropper.value[index].$on('ready', () => {
        console.log('Cropper is ready!');
        cropper.value[index].setData({data})   
});

All I did was accessed the underlying element of the cropper component and attaching an event listener to that element, and it worked.

const element = cropperInstance.$el;
element.addEventListener("ready", () => { 
     //code
})