Resetting animation from the composition API

Hi, I’m starting my composition api journey. I’m building an app using ionic and vue3. There’s an animation (a bouncing ball) that I need to be able to stop, and reset. So it needs to go back to it’s initial state when i press the [stop] button. Css doesn’t handle this very well.
In my Vue2 version, I needed to remove the class and on nextTick re-add the animation class. That would restore the initial values. This works:

methods: {
    resetAnimation () {['animation-play-state'] = 'paused';
        this.ballObject.className = '';
        // render to reset class, than re-add
        this.$nextTick(() => {
            this.ballObject.className = 'ball';

Using the composition API, somehow this doesn’t work:

import { ref, computed, watch, nextTick } from 'vue';
export default {
    setup () {
        const resetAnimation = async () => {
  ['animation-play-state'] = 'paused';
            ballObject.className = '';
            await nextTick(() => {
                ballObject.className = 'ball';

The animation does “pause” and the class is removed - and is then the class is re-added. But the ball does not reappear. I can see in the developer tools that it should be visible though.
Should I do something more to force re-rendering?

Solved my own problem! In Vue2 I used querySelector instead of ref to the animated template element.
inside the setup() method, that doesn’t work (haven’t figured out why…)
This works:

<div ref="ballObj" class="ball">
    <div>{{ bpm }} bpm</div>
setup (props, context) {
    const ballObj = ref(null);

    const resetAnimation = async () => {['animation-play-state'] = 'paused';
        ballObj.value.className = '';
        await nextTick(() => {
            ballObj.value.className = 'ball';

    return {

For anyone looking for this: you need to return the object for some reason. otherwise the ref won`t work.