fix: apply diff on nested computed objects

examples/vue-router/Child.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed, toRefs, onUnmounted } from 'vue'
+import { defineComponent, ref, reactive, computed, toRefs, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useMeta } from 'vue-meta'
 
@@ -14,12 +14,14 @@ export default defineComponent({
       metaUpdated
     })
 
+    const ogTitle = ref('Og Child Title')
+
     const metaConfig = computed(() => ({
       charset: 'utf16',
       title: route.name[0].toUpperCase() + route.name.slice(1),
       description: 'Description ' + route.name,
       og: {
-        title: 'Og Title ' + route.name
+        title: ogTitle.value + ' ' + route.name
       }
     }))
 
@@ -29,6 +31,9 @@ export default defineComponent({
 
     onUnmounted(() => (metaUpdated = 'yes'))
 
+    setTimeout(() => (ogTitle.value = 'Updated Child Og Title'), 1000)
+    setTimeout(() => (delete metaConfig.value.og), 3000)
+
     onRemoved(() => {
       console.log('Meta was removed', pageName.value)
     })

src/object-merge/proxy.ts

@@ -51,7 +51,7 @@ export const createHandler = <T>(context: MergeContext<T>, resolveContext: Resol
   },
   set: (target, key, value) => {
     const success = Reflect.set(target, key, value)
-    // console.warn(success, 'PROXY SET\nkey:', key, '\npath:', pathSegments, '\ntarget:', isArray(target), target, '\ncontext:\n', context)
+    // console.warn(success, 'PROXY SET\nkey:', key, '\nvalue:', value, '\npath:', pathSegments, '\ntarget:', isArray(target), target, '\ncontext:\n', context)
 
     if (success) {
       const isArrayItem = isArray(target)

src/useApi.ts

@@ -29,7 +29,6 @@ export function useMeta (source: MetaSource, manager?: MetaManager): MetaProxy {
 
   if (isProxy(source)) {
     watch(source, (newSource, oldSource) => {
-      // We only care about first level props, second+ level will already be changed by the merge proxy
       applyDifference(metaProxy.meta, newSource, oldSource)
     })
 

src/utils/diff.ts

@@ -12,9 +12,8 @@ export function applyDifference (target: AnyObject, newSource: AnyObject, oldSou
       continue
     }
 
-    // We dont care about nested objects here , these changes
-    // should already have been tracked by the MergeProxy
     if (isObject(target[key])) {
+      applyDifference(target[key], newSource[key], oldSource[key])
       continue
     }
 

test/unit/use-api.test.ts

@@ -0,0 +1,48 @@
+import { defineComponent, ref, computed } from 'vue'
+import { mount } from '@vue/test-utils'
+import { createMetaManager, useMeta, useActiveMeta } from '../../src'
+
+describe('useMeta', () => {
+  test('Computed nested objects properties update the active metadata on change', async () => {
+    const component = defineComponent({
+      setup () {
+        const title = ref('Title')
+
+        useMeta(computed(() => ({
+          title: title.value
+        })))
+
+        const metadata = useActiveMeta()
+
+        return {
+          title,
+          metadata
+        }
+      },
+      methods: {
+        updateTitle (title: string) {
+          this.title = title
+        }
+      },
+      template: '<div>test</div>'
+    })
+
+    const wrapper = mount(component, {
+      global: {
+        plugins: [
+          createMetaManager()
+        ]
+      }
+    })
+
+    expect(wrapper.vm.title).toBe('Title')
+    expect(wrapper.vm.metadata.title).toBe('Title')
+
+    wrapper.vm.updateTitle('Updated Title')
+    expect(wrapper.vm.title).toBe('Updated Title')
+    expect(wrapper.vm.metadata.title).toBe('Title')
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.metadata.title).toBe('Updated Title')
+  })
+})