I would like to use vueuse’s useDraggable with svg components, setting the svg position instead of using the style to move the element. As far as I can tell, this should be possible, but I haven’t gotten it to work.

Simple example:

<script setup>
import { useDraggable } from '@vueuse/core'
import { ref, reactive } from 'vue';


const redCirc = reactive({ x: 40, y: 40, r: 10 });
const redCircRef = ref(null);

const {x, y} = useDraggable(redCircRef, {
  initialValue: { x: redCirc.x, y: redCirc.y },
  onStart: () => {
    console.log('move');
  }
});
</script>

<template>
<svg>
   <circle
      :cy="y"
      :cx="x"
      :r="redCirc.r"
      fill="red"
      :ref="redCircRef"
    />
  </svg>
</template>

Can anyone please tell me what I’m missing?