Vue Unhead generates warnining "[Vue warn]: inject() can only be used inside setup() or functional components. "

Question

I'm trying to use the Unhead library in a Vue 3 project, it works fine however I keep getting this Vue warning originating from a view component

[Vue warn]: inject() can only be used inside setup() or functional components.

I followed these instructions to install and setup the library and it looks like so in my file :

main.js

import { createHead } from '@unhead/vue';
...

const app = createApp(App);
const head = createHead();


app.use(router);
app.use(store);
...
app.use(head);

app.mount('#app');

and I'm using the useSeoMeta composable like so in an article view

ArticleView.vue

<script setup>
import { useSeoMeta } from '@unhead/vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import knowledgeAPI from '@/services/knowledgeAPI.js';
...

const route = useRoute();

const articleData = ref(null);

/* sharability enhancements */
onMounted(async () => {
  // fetching data after mounting to trigger loading status 
  articleData.value = await knowledgeAPI.getArticleById(route.params.id);

  // adding meta tags for this view
  useSeoMeta({
    title: articleData.value.title,
    ogTitle: articleData.value.title,
    twitterTitle: articleData.value.title,
    description: articleData.value.summary,
    ogDescription: articleData.value.summary,
    twitterDescription: articleData.value.summary,
    ogImage: articleData.value.img,
    twitterImage: articleData.value.img,
    twitterCard: 'summary',
    ogSiteName: 'MySite'
  });

});
</script>