vue.js - vue-meta 版本 3：metaInfo 错误“这是未定义的”如何通过 api 调用创建动态元

Question

在 vue-meta 版本 3 我使用 metaInfo 像 vue-meta 版本 2

我导入了 vue-meta 插件，但我无法访问组件，错误是“这是未定义的”

在 setup() 我们只访问道具和上下文

如何通过 api 调用创建动态元以及哪种方式是标准方式

vue-meta 版本 3 文档

我的 app.js

import { createApp } from 'vue'
import Axios from 'axios'
import { createMetaManager, plugin as metaPlugin } from 'vue-meta'

const app = createApp({
    components: {
        ...
    }
})
app.use(createMetaManager())
app.use(metaPlugin)

我的组件

export default {
  data: function () {
    return {
      productName: '',
    };
  },
  mounted() {
      axios.post('/get_product_name').then((response)=>{
          this.productName = response.data.product_name
      })
  },
  metaInfo() {
    let productName = this.productName; 
    return {
       title: productName ?  "product : " + productName : "product",
    }
  }
}