when plain element with v-bind="obj" has style property, style property mutation is not work

[a42195472]

Vue version

latest 3.4.38

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uz2P00AQ/SujbXyRgnMIquBEfOgKKAAdlG4ce+JsYu9au+NcosglICooEDRUiJYr6KDhz5AA/4Lx2nFy0uksy9rd92bmzRvvRjwoCn9ZohiKwMZGFjQOlcwLbQg2QPocp7YPBqOY5BKhgqnROXgc4d0LFa4cMcFpVGYcECoAi1QWJ71mAxBrZQksRYQw6hKdtChAbtMheNvXr7aXP3Yf32y/ffL6e0xP5sN9nvohSRkye/fu/Z+vPw88LkrrGjniAlzIhGbMvn16WqyOyQAzlOmMrscmUbxIjS5VwrhdrCcZ93qFEetMGwYNJt7hvNov20XVOzYgnkUqrR1gZ0bjg1BnjM+N+q4F3+VmmrfGLNMXbf42pWFrjToE+77fTOjEpel1KptqR7H84TcYdCPmDWFeZBzGO4AgkUtY3ppIlYxCwXpCMd5s6ulAVQUDRhvapCTSCu7HmYwXzGwrifHvX5e7D+0E/335/Pft92DQkDkwGHTFRF+QZU+mMvXnViv+8Vw/nErnhczQPCtIsmeh6OYZiqg244k7I1Ni22hdHuPFNedzu6rPQvHcoEWzZIUdRpFJkRr47MVTXPG6A3OdlBmzbwDP0eqsrDU2tIf8q7DsI55T+9hdIqnSl/ZsRajsvqlaqJuJ44eC79KjG1o/yL3j393PUlT/AWeeNjU=

Steps to reproduce

When click the button to change the style's color, The color of the template text is not changed

What is expected?

Hope the color of this template text can change normally

What is actually happening?

It doent work. The template color is not changed

System Info

No response

Any additional comments?

No response

[jh-leong]

As a workaround, you can reassign the style fields like this: Playground

// state.obj.style.color = 'yellow'
state.obj.style = {...state.obj.style, color: 'yellow'}

Or use a separate style binding: Playground

[a42195472]

In the file of packages/runtime-core/src/vnode.ts, The guardReactiveProps function should use deep copy to handle reactive props? If use a shallow copy of extend({}, props), the deep reactive obj of the props is a reference, so maybe cause this bug too @edison1105

[edison1105]

@a42195472 Yes, that's true. The PR from @linzhe141 will fix this problem.