diff --git a/runtime/react/page/App.tsx b/runtime/react/page/App.tsx
index fbc4decd..668d5798 100644
--- a/runtime/react/page/App.tsx
+++ b/runtime/react/page/App.tsx
@@ -23,7 +23,7 @@ import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);
@@ -33,11 +33,16 @@ function App() {
   const [config, setConfig] = useState(app.page.data);
 
   app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
+    let pageConfig = config;
     nodes.forEach((node) => {
-      replaceChildNode(node, [config]);
+      if (isPage(node)) {
+        pageConfig = node;
+      } else {
+        replaceChildNode(node, [pageConfig]);
+      }
     });
 
-    setConfig(cloneDeep(config));
+    setConfig(cloneDeep(pageConfig));
 
     setTimeout(() => {
       app.emit('replaced-node', {
diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue
index b04b36db..f604551c 100644
--- a/runtime/vue2/page/App.vue
+++ b/runtime/vue2/page/App.vue
@@ -3,23 +3,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, reactive } from 'vue';
+import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
     const app = inject<Core | undefined>('app');
-    const pageConfig = reactive(app?.page?.data || {});
+    const pageConfig = ref(app?.page?.data || {});
 
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
-        replaceChildNode(reactive(node), [pageConfig as MNode]);
+        if (isPage(node)) {
+          pageConfig.value = node;
+        } else {
+          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
+        }
       });
 
       if (!app) return;
diff --git a/runtime/vue3/page/App.vue b/runtime/vue3/page/App.vue
index b04b36db..f604551c 100644
--- a/runtime/vue3/page/App.vue
+++ b/runtime/vue3/page/App.vue
@@ -3,23 +3,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, nextTick, reactive } from 'vue';
+import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
 
 import Core from '@tmagic/core';
 import type { ChangeEvent } from '@tmagic/data-source';
 import type { MNode } from '@tmagic/schema';
-import { replaceChildNode } from '@tmagic/utils';
+import { isPage, replaceChildNode } from '@tmagic/utils';
 
 export default defineComponent({
   name: 'App',
 
   setup() {
     const app = inject<Core | undefined>('app');
-    const pageConfig = reactive(app?.page?.data || {});
+    const pageConfig = ref(app?.page?.data || {});
 
     app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
       nodes.forEach((node) => {
-        replaceChildNode(reactive(node), [pageConfig as MNode]);
+        if (isPage(node)) {
+          pageConfig.value = node;
+        } else {
+          replaceChildNode(reactive(node), [pageConfig.value as MNode]);
+        }
       });
 
       if (!app) return;