When using any of the provided composables, such as useHead, full reactivity is provided out of the box.

All values are reactive and support:

• ref
• computed getter
• computed (not recommended)

const myPage = ref({ description: 'This is my page' })
const title = ref('title')
const myScript = computed(() => ({
  src: 'https://example.com/script.js',
  defer: true,
}))
useHead({
  // ref (recommended)
  title,
  // computed getter (recommended)
  meta: [{ name: 'description', content: () => myPage.value.description },],
  // computed (not recommended)
  script: [computed(() => ({
    src: 'https://example.com/script.js',
    defer: true,
  }))],
})

It's recommended to avoid using computed, as you will have simpler and more performant code.

When using reactivity in SSR, only at the time of rendering the SSR tags will be refs be resolved.

When using reactivity in CSR, any ref changes will trigger a request to update the DOM.