lag while dragging element

I am implementing a functionality where I can add, drag and delete "sticky notes" on a webpage. The app is built in vue js but it also renders content in an iframe. All the notes that are added to page have to be on top of the iframe (which is almost 80% of the main .vue page), therefore positioning here is important and I also have to preserve the positions because I must render the notes on the same position on next page reload. The problem is that there's a lot of lag in dragging the "note" element. The "sticky note" itself is a very lite weight separate component.
I have noticed that this because of the iframe that's present on the vue page because when I inspect the DOM in the browser and delete the iframe and then try dragging the "note" component then it works smoothly.

Things I have tried:

1. Use throttling: I tried to use loadsh.throttle but that does not make any difference.
2. Inject "sticky note" code inside the iframe: I tried to inject sticky note element into the iframe and append it to iframe's body. It actually makes the dragging very smooth. But I dont want to go ahead with this solution because then I will have to write a lot of extra code to maintain state of multiple notes (which can be done easily with vue js). In this solution, instead of using document of main page to attach events for dragging, I attached all the events to iframe.contentDocument.

So the question here is how do I make the drag smooth while using vue.js
Sandbox Link: https://codesandbox.io/s/affectionate-jang-3c1hw?file=/src/components/HelloWorld.vue

In this gif, the background is actually the iframe, I have reduced it's opacity to hide it.
I could not actually include the iframe in sandbox code because of cross-origin problems but I have included a lot of extra content in that sandbox to make it heavy.

from lag while dragging element