From: daiwei <daiwei521@126.com>
Date: Mon, 26 May 2025 08:31:02 +0000 (+0800)
Subject: fix(vapor): ensure props are shallow reactive to prevent DEV warnings
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bd701f2e2016dc91322f0cf26db0b3ad797cf6da;p=thirdparty%2Fvuejs%2Fcore.git

fix(vapor): ensure props are shallow reactive to prevent DEV warnings
---

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index 77228fd72a..a824fb0871 100644
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -14,6 +14,7 @@ import {
   ensureRenderer,
   onScopeDispose,
   renderSlot,
+  shallowReactive,
   shallowRef,
   simpleSetCurrentInstance,
 } from '@vue/runtime-dom'
@@ -161,7 +162,15 @@ function createVDOMComponent(
 
   // overwrite how the vdom instance handles props
   vnode.vi = (instance: ComponentInternalInstance) => {
-    instance.props = wrapper.props
+    // Ensure props are shallow reactive to align with VDOM behavior.
+    // This enables direct watching of props and prevents DEV warnings.
+    //
+    // Example:
+    // const props = defineProps(...)
+    // watch(props, () => { ... }) // props must be reactive for this to work
+    //
+    // Without reactivity, Vue will warn in DEV about non-reactive watch sources
+    instance.props = shallowReactive(wrapper.props)
     instance.attrs = wrapper.attrs
     instance.slots =
       wrapper.slots === EMPTY_OBJ