Can not access to component methods in page using `this.$refs`

Environment

• Operating System: Darwin
• Node Version: v17.0.0
• Nuxt Version: 3.0.0-27396610.ed4f4f5
• Package Manager: npm@8.1.0
• Bundler: Vite
• User Config: css, build, publicRuntimeConfig, serverMiddleware
• Runtime Modules: -
• Build Modules: -

Reproduction

1. Create a component and add a method like this:

// ~/components/player.vue
<script>
export default {
    methods: {
        play() {
            // Play something
        },
    },
}
</script>

1. Create a page and use the player component and assign a ref to it:

// ~/pages/index.vue
<template>
    <Player ref="player" />
</template>

1. Now in the page index.vue I should be able to access player component’s methods like this:

// ~/pages/index.vue
<script>
export default {
    mounted() {
        this.$refs.player.play()
    },
}
</script>

But it is not working and occurs an error:

Uncaught (in promise) TypeError: this.$refs.player.play is not a function

Describe the bug

In Nuxt 2 we can use a component’s methods in another component or page by using $refs. Currently, in Nuxt 3 I can not use this approach.

Additional context

No response

Logs

Uncaught (in promise) TypeError: this.$refs.player.play is not a function

[danielroe]

@alijmlzd Would you provide a reproduction using either codesandbox or stackblitz?

[alijmlzd]

I’m using $refs in the mounted state just like the guide link you mentioned but not works as expected. I have not tested this issue with Vue 3 standalone but in Nuxt 3 It obviously does not work.