fix(nuxt3): trigger update dom when invoking usemeta (#650)

packages/nuxt3/src/meta/runtime/lib/vueuse-head.plugin.ts

@@ -1,5 +1,5 @@
 import { createHead, renderHeadToString } from '@vueuse/head'
-import { ref } from 'vue'
+import { ref, watchEffect, onBeforeUnmount } from 'vue'
 import type { MetaObject } from '..'
 import { defineNuxtPlugin } from '#app'
 
@@ -8,7 +8,21 @@ export default defineNuxtPlugin((nuxt) => {
 
   nuxt.app.use(head)
 
-  nuxt._useMeta = (meta: MetaObject) => head.addHeadObjs(ref(meta as any))
+  nuxt._useMeta = (meta: MetaObject) => {
+    const headObj = ref(meta as any)
+    head.addHeadObjs(headObj)
+
+    if (process.server) { return }
+
+    watchEffect(() => {
+      head.updateDOM()
+    })
+
+    onBeforeUnmount(() => {
+      head.removeHeadObjs(headObj)
+      head.updateDOM()
+    })
+  }
 
   if (process.server) {
     nuxt.ssrContext.renderMeta = () => renderHeadToString(head)