Vueuse useDraggable с помощью SVG

Я хотел бы использовать useDraggable vueuse с компонентами svg, устанавливая позицию svg вместо использования стиля для перемещения элемента. Насколько я могу судить, это должно быть возможно, но у меня это не заработало.

Простой пример:

Может ли кто-нибудь сказать мне, что я упускаю?

<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>