How to use/configure @vueuse/head

[victorlmneves]

I have a component where I'm using @vueuse/head to set the title, description, and so on.
The problem is that I getting this error

index.mjs:100 Uncaught (in promise) Error: You may forget to apply app.use(head)
    at injectHead (index.mjs:100:11)
    at useHead (index.mjs:282:16)
    at Proxy.mySetupApp (FormValidationScope.story.vue:12:11)
    at mountVariant (client.js?v=7892b643:770:29)
    at async client.js?v=7892b643:851:9

Based on the description of the error I try to set it up where I'm already initializing Pinia but it doesn't work

function mySetupApp ({ app }) {
  app.use(createPinia());
  app.use(useHead({
    title: '',
    meta: [
      {
        name: 'description',
        content: '',
      },
      {
        name: 'keywords',
        content: '',
      },
    ],
  }));
}

Also tried just like this

function mySetupApp ({ app }) {
  app.use(createPinia());
  app.use(useHead);
}

And like this

function mySetupApp ({ app }) {
  app.use(createPinia());
  app.use(useHead());
}

<Story group="base" title="Components/Form/Form Validation Scope" :setup-app="mySetupApp">

Am I doing something wrong?

Thanks

[victorlmneves]

Looks like I wasn't doing the correct way :/
Now with the correct implementation is working fine

import { createPinia } from 'pinia';
import { createHead } from '@vueuse/head';
import { defineSetupVue3 } from 'histoire/client';

export const setupVue3 = defineSetupVue3(({ app, story, variant }) => {
    const pinia = createPinia()
    const head = createHead()
    app.use(pinia)
    app.use(head)
})