How to use Vue-meta with vue3?

Question

Actually, I installed it. Everything was well until I tried to add a meta description. The problem is that when I want to use meta description instead of showing the name as a description it shows it as a meta

I would appreciate it if someone helps me

My package.json

"dependencies": {
    "@emailjs/browser": "^3.4.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@jambonn/vue-lazyload": "^1.0.9",
    "animate.css": "^4.1.1",
    "bootstrap-icons": "^1.7.1",
    "core-js": "^3.6.5",
    "emailjs": "^3.7.0",
    "emailjs-com": "^3.2.0",
    "mixitup": "^3.3.1",
    "sass": "^1.49.7",
    "swiper": "^8.0.7",
    "vue": "^3.0.0",
    "vue-meta": "3.0.0-alpha.7",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass-loader": "^8.0.2"
  },

My main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { createMetaManager } from 'vue-meta'

createApp(App)
    .use(store)
    .use(router)
    .use(createMetaManager())
    .mount('#app')

My App component

<template>
  <div id="app">
    <metainfo>
      <template v-slot:title ="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` </template>
    </metainfo>
    <div>
      <Header/>
      <router-view/>
    </div>
  </div>
</template>

My Main components setup

import { useMeta } from 'vue-meta'

export default {
  name: 'Main',
  setup () {
    useMeta(
        {
          title: 'Some title',
          meta: [
            { name: 'description', content: 'An example Vue application with vue-meta.' },
          ]
        },
    )
  },
}

Answer 1

Do bellow changes in main.js file

main.js

import { createMetaManager } from "vue-meta";
import { plugin as vueMetaPlugin } from "vue-meta";

app.use(vueMetaPlugin);
app.use(createMetaManager());