fix: useMeta() throws error if used in a layout

[miii]

🐛 The bug
The head: {} property triggers an error inside @vue/composition-api if used in a layout component, thus useMeta() cannot be used.

[vue-composition-api] must call Vue.use(plugin) before using any function

Pages seems to work as expected. The problem is caused by reactive() not being used in the correct scope (too soon in the Nuxt lifecycle?).

composition-api/src/meta.ts

Lines 43 to 53 in 48547f0

	export const getHeadOptions = (options: any) => {
	const _head: ReactiveHead = reactive<MetaInfo>({})
	if (!(options.head instanceof Function)) {
	Object.assign(_head, options.head)
	}
	const head =
	options.head instanceof Function
	? () => defu(_head, options.head())
	: () => _head
	return { _head, head }
	}

I've resolved the issue myself in a fork by using Vue.observable() instead of reactive().
I'll submit a PR when it's ready to be reviewed.

🛠️ To reproduce
Steps to reproduce the behavior:

1. Add head: {} to your layout
2. See error

Use this sandbox to reproduce the error.
https://codesandbox.io/s/nuxt-composition-api-usemeta-layout-issue-r14yy?file=/layouts/default.vue

🌈 Expected behaviour
useMeta() should work in layout components as expected.

[Mikaleb]

Error is not closed at all, can still reproduce with last version :

layouts/default.vue

export default defineComponent({
name: 'ContentLayout',
setup(props, ctx) {

    const { title } = useMeta()
    title.value = 'Test'
    return {title}
}
//...

Getting the error : useMeta must be called within a component.

[danielroe]

@Mikaleb Would you mind providing a reproduction?

[Mikaleb]

@danielroe I tried and saw that my version was not updated for some reason, my apologies !