fix(core): propsProxy should not convert non-reactive nested values

packages/reactivity/src/baseHandlers.ts

@@ -11,17 +11,21 @@ const builtInSymbols = new Set(
     .filter(isSymbol)
 )
 
-function createGetter(isReadonly: boolean, unwrap = true) {
+function createGetter(isReadonly: boolean, shallow = false) {
   return function get(target: object, key: string | symbol, receiver: object) {
     let res = Reflect.get(target, key, receiver)
     if (isSymbol(key) && builtInSymbols.has(key)) {
       return res
     }
-    if (unwrap && isRef(res)) {
-      res = res.value
-    } else {
+    if (shallow) {
       track(target, OperationTypes.GET, key)
+      // TODO strict mode that returns a shallow-readonly version of the value
+      return res
     }
+    if (isRef(res)) {
+      return res.value
+    }
+    track(target, OperationTypes.GET, key)
     return isObject(res)
       ? isReadonly
         ? // need to lazy access readonly and reactive here to avoid
@@ -146,7 +150,7 @@ export const readonlyHandlers: ProxyHandler<object> = {
 // props handlers are special in the sense that it should not unwrap top-level
 // refs (in order to allow refs to be explicitly passed down), but should
 // retain the reactivity of the normal readonly object.
-export const readonlyPropsHandlers: ProxyHandler<object> = {
+export const shallowReadonlyHandlers: ProxyHandler<object> = {
   ...readonlyHandlers,
-  get: createGetter(true, false)
+  get: createGetter(true, true)
 }

packages/reactivity/src/index.ts

@@ -4,7 +4,7 @@ export {
   isReactive,
   readonly,
   isReadonly,
-  readonlyProps,
+  shallowReadonly,
   toRaw,
   markReadonly,
   markNonReactive

packages/reactivity/src/reactive.ts

@@ -2,7 +2,7 @@ import { isObject, toRawType } from '@vue/shared'
 import {
   mutableHandlers,
   readonlyHandlers,
-  readonlyPropsHandlers
+  shallowReadonlyHandlers
 } from './baseHandlers'
 import {
   mutableCollectionHandlers,
@@ -85,18 +85,17 @@ export function readonly<T extends object>(
 }
 
 // @internal
-// Return a readonly-copy of a props object, without unwrapping refs at the root
-// level. This is intended to allow explicitly passing refs as props.
-// Technically this should use different global cache from readonly(), but
-// since it is only used on internal objects so it's not really necessary.
-export function readonlyProps<T extends object>(
+// Return a reactive-copy of the original object, where only the root level
+// properties are readonly, and does not recursively convert returned properties.
+// This is used for creating the props proxy object for stateful components.
+export function shallowReadonly<T extends object>(
   target: T
 ): Readonly<{ [K in keyof T]: UnwrapNestedRefs<T[K]> }> {
   return createReactiveObject(
     target,
     rawToReadonly,
     readonlyToRaw,
-    readonlyPropsHandlers,
+    shallowReadonlyHandlers,
     readonlyCollectionHandlers
   )
 }