runWithContext not working as expected

import type { CraftSite } from 'vue-craftcms'
type SeoData = {
  MetaTitleContainer: { title?: { title: string } }
}

export async function useCraftSeoMatic(uri?: string | Ref<string>, site?: CraftSite | Ref<CraftSite>) {
  const { baseUrl, siteMap } = useRuntimeConfig().public.craftcms
  const currentUri = uri ? ref(uri) : useCraftUri()
  const apiEndpoint = computed(() =>
    `${baseUrl}/actions/seomatic/meta-container/all-meta-containers/?asArray=true&uri=${encodeURIComponent(currentUri.value)}`,
  )

  const { data: seoMaticData, error } = await useAsyncData(
      'seoMaticData',
      async () => {
        const response = await $fetch<SeoData>(apiEndpoint.value)
        if (!response || typeof response !== 'object') {
          console.error('Transformation of SEOmatic data failed, please verify that the SEOmatic endpoint is working correctly')
          return undefined
        }
        return {
          title: response.MetaTitleContainer?.title?.title ?? '',
        };
      }
  )

  if(error.value) {
    console.error(error.value)
  }

  const app = useNuxtApp()

  app.runWithContext(() => {
    useHead({
      title: seoMaticData.value?.title,
    })
  })
}

<script setup lang="ts">
// Fetch & apply seomatic properties
await useCraftSeoMatic()
</script>