Calling methods on template ref in Vue 3 component not working

I’m trying to programatically control a video in a Vue 3 (with TypeScript and Composition API) component. I have a <video> element and some code that looks like this:

<template>
    <div>
        <video ref="videoElement">
            <slot name="sources" />
        </video>
        <div>
            <button v-if="playing" @click="pause">Pause</button>
            <button v-else @click="play">Play</button>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
    setup() {
        const videoElement = ref<InstanceType<typeof HTMLVideoElement>>();
        const pause = () => videoElement.value!.pause();
        const play = () => videoElement.value!.play();
        const playing = ref(false);

        videoElement.value!.addEventListener('pause', () => playing.value = false);
        videoElement.value!.addEventListener('play', () => playing.value = true);

        return {
            pause,
            play,
            playing,
            videoElement,
        };
    },
});
</script>

However, when clicking the “play” button. Nothing happens, but nothing is logged to the console either.

If I log the videoElement value, it correctly reports that it is a HTMLVideoElement instance, but calling play() on that instance doesn’t actually play the video.

Can any one see where I might be going wrong?