Vue3/Vue.js 親コンポネントから子コンポネントのメソッド呼び出し

Vue3/Vue.js 親コンポネントから子コンポネントのメソッド呼び出し

//親コンポネント
<script>
    .
    .
    methods: {
        onPlay(){
            this.$refs.player.play();
        }
    }

    .
    .
</script>
<template>
    <Player ref="player"></Player>
    <button type="button" @click="onPlay">PLAY</button>
</template>

-------------------------------------------------------

//子コンポネント
<script>
    .
    .
    methods: {
        play(){
            document.querySelector('#video').play();
        }
    }

    .
    .
</script>
<template>
    <div>
        <video id="video" src="video.mp4" />
    </div>
</template>