Is there an alternative method for replacing the default element that appears under the mouse with an image while dragging a draggable element?

I’m working on drag-and-drop functionality in a vue.js web application where I want to replace the default drag image that appears under the mouse with a custom image. Currently, I’m using the following implementation:

const imgElement = gridField.children[0].querySelector('.applicationImage');
const imgClone = imgElement.cloneNode();

imgClone.style.width = '40px';
imgClone.style.height = '40px';
imgClone.style.pointerEvents = 'none';
imgClone.style.position = 'absolute';
imgClone.style.top = '-1000px';

this.$el.appendChild(imgClone);

event.dataTransfer.setDragImage(imgClone, 20, 20);

setTimeout(() => {
  this.$el.removeChild(imgClone);
}, 0);

for further context I use this code inside a eventListener that is set in the vue template like this:
`@dragstart=”dragAndDrop($event, ‘dragstart’)”‘

It works fine but it does feel like a unclean workaround.

I tried to look for other solutions but could not find any. Is there a better way to implement this functionality?

Thank you!