Resetting animation from the composition API

Get Help
#1

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 () {
        this.ballObject.style['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 () => {
            ballObject.style['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?

#2

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

setup (props, context) {
    const ballObj = ref(null);

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

    return {
        ballObj
    }

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