Project link : https://codesandbox.io/s/icy-pine-x6kep?file=/src/App.vue

Looks like I managed to get stuck :( So, my main goal with this mini-project is to be able to create multiple circles when clicking on the defined work canvas from the app above, without using canvas, or other modules.

The problem I'm facing right now is that when I am trying to create a new circle in order to make it draggable, what happens is that the circle that already exists and it's hardcoded (just for testing purposes), moves to the position that I'm clicking.

Besides that, another issue is that the dragging does not work at all if I remove the 'hardcoded svg' from line 17 in App.vue.

I'm thinking the problem is because I'm wrongly 'v-binding' the coordinates of the circle, but I cannot figure it out :(.

Can someone please advise me and give me a hint so I can go in the right direction?

Thanks!