[naive/use-message]: No outer <n-message-provider /> founded

新手请教<n-message-provider/>到底该怎么用

# App.vue
<template>
  <n-message-provider>
    <HelloWorld/>
  </n-message-provider>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

<style>

</style>

# HelloWorld.vue
<template>

  <n-space>
    <n-button @click="info"> 信息 </n-button>
    <n-button @click="error"> 错误 </n-button>
    <n-button @click="warning"> 警告 </n-button>
    <n-button @click="success"> 成功 </n-button>
    <n-button @click="loading"> 加载中 </n-button>

  </n-space>
</template>

<script>
import { useMessage, NButton } from 'naive-ui'

export default {
  setup () {
    const message = useMessage()
    return {
      info () {
        message.info("I don't know why nobody told you how to unfold your love")
      },
      error () {
        message.error('Once upon a time you dressed so fine')
      },
      warning () {
        message.warning('How many roads must a man walk down')
      },
      success () {
        message.success(
          "'Cause you walked hand in hand With another man in my place"
        )
      },
      loading () {
        message.loading(
          'If I were you, I will realize that I love you more than any other guy'
        )
      }
    }
  }
}
</script>

F12 报错[naive/use-message]: No outer <n-message-provider /> founded，新手实在不知道<n-message-provider />该放哪，求指教