fix(nuxt): use deep assignment for app.config hmr

packages/nuxt/src/app/config.ts

@@ -1,17 +1,20 @@
 import type { AppConfig } from '@nuxt/schema'
-import { reactive } from 'vue'
+import { reactive, toRef } from 'vue'
 import { useNuxtApp } from './nuxt'
 // @ts-ignore
 import __appConfig from '#build/app.config.mjs'
 
 // Workaround for vite HMR with virtual modules
 export const _getAppConfig = () => __appConfig as AppConfig
 
-export function useAppConfig (): AppConfig {
+export function useAppConfig (key?: string) {
   const nuxtApp = useNuxtApp()
   if (!nuxtApp._appConfig) {
     nuxtApp._appConfig = reactive(__appConfig) as AppConfig
   }
+  if (key) {
+    return reactive(toRef(nuxtApp._appConfig, key))
+  }
   return nuxtApp._appConfig
 }
 
@@ -20,9 +23,7 @@ if (process.dev) {
   function applyHMR (newConfig: AppConfig) {
     const appConfig = useAppConfig()
     if (newConfig && appConfig) {
-      for (const key in newConfig) {
-        (appConfig as any)[key] = (newConfig as any)[key]
-      }
+      deepAssign(appConfig, newConfig)
       for (const key in appConfig) {
         if (!(key in newConfig)) {
           delete (appConfig as any)[key]
@@ -31,6 +32,17 @@ if (process.dev) {
     }
   }
 
+  function deepAssign (obj: any, newObj: any) {
+    for (const key in newObj) {
+      const val = newObj[key]
+      if (val && typeof val === 'object') {
+        deepAssign(obj[key], val)
+      } else {
+        obj[key] = val
+      }
+    }
+  }
+
   // Vite
   if (import.meta.hot) {
     import.meta.hot.accept((newModule) => {