Vue-meta is not working on vue js project

Question

I want to use vue-meta to dynamic meta data in vue 3 project using type script but it does not work.. Here is my code..

import { useHead } from '@vueuse/head'

// we import our useApi helper
import { defineComponent, ref, onMounted } from 'vue'
import { useMeta } from 'vue-meta'
import axios from 'axios'
const headers = {

  Accept: 'application/json',
  'Content-Type': 'application/json;charset=UTF-8',
}

const blogs_array = ref('')
useHead({
  title: 'My website - About',
})

const dynamicDescription = ref('This is a dynamic meta description.')

useMeta(() => {
  return {
    meta: [{ name: 'description', content: dynamicDescription.value }],
  }
})

onMounted(() => {
  dynamicDescription.value = 'This is a dynamic meta description based on some logic.'
})
</script>````