Passing data between directives?

Question

Vue.js

I am writing an application-specific stack of Drag'n'Drop, Resizable, Rotatable, Croppable. Before I decided to write, I dug Google myself in search of libraries, but in the end, the specifics of the application and the behavior, for example, Resizable and Rotatable, are very specific ...
In general, I decided to write to implement this stack in directives, because if the stack is divided into components, then there will be a lot of nesting in components, and if the entire stack is written in 1 component, then it’s personally more difficult and uncomfortable for me to change its functionality ...
I want to do something like this:
thrown element:

<div v-draggable>
  <img :src="imgUrl">
</div>

container that accepts draggable elements:

<div  v-droppable>
  а это элементы принятые контейнером
  <div
    v-draggable
    v-resizable
    v-rotatable
    v-croppable>
    <img :src="imgUrl">
  </div>
  <div
    v-draggable
    v-resizable
    v-rotatable
    v-croppable>
    <img :src="imgUrl">
  </div>
  ...and more
</div>

The problem is that I can't figure out how to pass data when transferring from the v-draggable directive to the v-droppable directive.
The only thing that came to mind was to take the vnode from the incoming parameters of the "bind" hook and pass this vnode when entering the v-droppable.
But in the vue documentation, in the custom directives section, it says
"All arguments other than el should be treated as read-only and never modified. If you need to pass information between hooks, we recommend using a dataset."
Although I looked at plugins on vue awesome and saw there they change the properties of vnode, for example, I don’t know if this is a developer’s mistake or not ..
Please advise how to implement this.