Como usar a API de animações da Web com Vue

A documentação do Vue3 usa CSS para efetuar transições, mas eu queria experimentar a API de animações da Web (relativamente nova) - em parte porque tenho problemas para usar variáveis ​​em CSS.

O seguinte código funciona:

<script setup>
import { ref } from 'vue'
import comp from './comp.vue'

function moveCircle() {
  let elem = document.getElementById("circle");
  if (elem) {
    elem.animate(
      [
        { transform: "translateX(0px)"},
        { transform: "translateX(320px)"}
      ], 500
    )
  }
}
</script>

<template>
<div>
  <comp id="circle"></comp>
  <button @click="moveCircle()">Move it</button>
</div>
</template>

(comp.)

<script setup></script>

<template>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</template>

Parque Vue aqui

... mas eu queria me livrar do que é um tanto complicado getElementByIde, em vez disso, usar refs do modelo Vue :

<script setup>
import { ref } from 'vue'
import comp from './comp.vue'

const circle = ref(null);

function moveCircle() {

  let elem = circle.value;
  if (elem) {
    elem.animate(
      [
        { transform: "translateX(0px)"},
        { transform: "translateX(320px)"}
      ], 500
    )
  }
}
</script>

<template>
<div>
  <comp ref="circle"></comp>
  <button @click="moveCircle()">Move it</button>
</div>
</template>

mas isso não faz a animação ( playground revisado ). A certa altura, ocorreu um erro animate() is not a function, mas agora não há erro - simplesmente nada acontece. Qual é a maneira correta de fazer isso?