Customize the "ghost" element with VueDraggable

I use the following library: https://github.com/SortableJS/Sortable

I have 2 lists where I can dragg one element to the other list. But When i dragg the item its a clone of the icon. What I am trying to do is while you move the item between the list. Instead of the Icon I want a customize element to be shown as "Ghost elememt".

Within sortableJS you something called "ghostClass" which works but it only adds the custom class. But now I want also to customize the ghost Element.

Is there a way to accomplish this?

I found the part where I can customize the "ghost" element within VueDraggable. For future developers with the same question.

You have the following method:

// Called when dragging element changes position
onChange: function(/**Event*/evt) {
    evt.newIndex // most likely why this event is used is to get the dragging element's current index
    // same properties as onEnd
}

So the following resolved my issue:

<VueDraggable :onChange="sectionChange " ...

The function it self:

const sectionChange = (evt) => {
  evt.item.innerHTML = `<div style="margin:0 auto;background:red;width:100px;">ADD ICON</div>`
}