fix: 🐛 Support reactive useMeta in layouts

[miii]

This PR uses Vue.observable instead of reactive to create meta refs to enable usage of useMeta() in layouts. This will also refresh vue-meta automatically if the state is updated. Since the observable API is used, Vue 2.6.0+ is required. Let me know if there are any issues with the suggested change.

✅ Closes: #64

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nuxt-community/composition-api/pa5oij2qi
✅ Preview: https://composition-api-git-fork-miii-master.nuxt-community.now.sh

[danielroe]

@miii I really appreciate this PR and the associated issue. I think the issue is bigger than just useMeta, however - as nothing Composition API-related could be used in layouts either. If we just solve the useMeta issue, the bigger problem remains. So I'm deploying a fix. Do let me know if it doesn't fix the error, however, or if you think there's still a need to use Vue.observable instead (which is what reactive uses under the hood).

[miii]

@danielroe great solution, thanks! Seems to be working properly for me.
I still have issues with the reactive integration with vue-meta.

For example:

setup (_, { root }) {
    const { title } = useMeta({ title: 'Init' });
    const { route } = useContext();

    watch([title], () => {
        // This watcher will never be triggered
        console.log('Title updated:', title);
    });

    watchEffect(() => {
      title.value = route.value.path;
      root.$meta().refresh(); // <-- this is required to refresh vue-meta
    });
}

In my opinion useMeta() should be reactive without having to call $meta().refresh() manually, like head() behaves. I think the watch issue is caused by the use of Object.assign().
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

composition-api/src/meta.ts

Line 46 in 8aadb0f

Object.assign(_head, options.head)

composition-api/src/meta.ts

Lines 86 to 87 in 8aadb0f

	Object.assign(_head, createEmptyMeta())
	Object.assign(_head, init || {})

I attempted to address this issue in the PR with Vue.set(), although it may not be perfect.