diff --git a/packages/nuxt3/src/app/composables/component.ts b/packages/nuxt3/src/app/composables/component.ts
index 1fc8b8bd69..b331671764 100644
--- a/packages/nuxt3/src/app/composables/component.ts
+++ b/packages/nuxt3/src/app/composables/component.ts
@@ -1,4 +1,4 @@
-import { defineComponent, getCurrentInstance, toRefs } from 'vue'
+import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
 import type { DefineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import type { LegacyContext } from '../compat/legacy-app'
@@ -14,7 +14,11 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
   const { fetchKey } = vm.proxy.$options
   const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
   const { data } = await useAsyncData(`options:asyncdata:${key}`, () => fn(nuxt._legacyContext))
-  Object.assign(await res, toRefs(data))
+  if (data.value && typeof data.value === 'object') {
+    Object.assign(await res, toRefs(reactive(data.value)))
+  } else if (process.dev) {
+    console.warn('[nuxt] asyncData should return an object', data)
+  }
 }
 
 export const defineNuxtComponent: typeof defineComponent =