fix(options): data options should preserve original object if possible

packages/runtime-core/src/apiApp.ts

@@ -1,6 +1,6 @@
 import { Component, Data, ComponentInternalInstance } from './component'
-import { ComponentOptions } from './componentOptions'
+import { ComponentOptions } from './apiOptions'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
 import { Directive } from './directives'
 import { RootRenderFunction } from './createRenderer'
 import { InjectionKey } from './apiInject'

packages/runtime-core/src/apiCreateComponent.ts

@@ -4,10 +4,10 @@ import {
   ComponentOptionsWithoutProps,
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithProps
-} from './componentOptions'
+} from './apiOptions'
 import { SetupContext } from './component'
 import { VNodeChild } from './vnode'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
 import { ExtractPropTypes } from './componentProps'
 import { isFunction } from '@vue/shared'
 

packages/runtime-core/src/apiLifecycle.ts

@@ -4,7 +4,7 @@ import {
   currentInstance,
   setCurrentInstance
 } from './component'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
 import { callWithAsyncErrorHandling, ErrorTypeStrings } from './errorHandling'
 import { warn } from './warning'
 import { capitalize } from '@vue/shared'

packages/runtime-core/src/apiOptions.ts

@@ -30,7 +30,8 @@ import { DebuggerEvent, reactive } from '@vue/reactivity'
 import { ComponentPropsOptions, ExtractPropTypes } from './componentProps'
 import { Directive } from './directives'
 import { VNodeChild } from './vnode'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
+import { warn } from './warning'
 
 interface ComponentOptionsBase<
   Props,
@@ -231,11 +232,15 @@ export function applyOptions(
 
   // state options
   if (dataOptions) {
-    const data =
+    const data = isFunction(dataOptions) ? dataOptions.call(ctx) : dataOptions
-      instance.data === EMPTY_OBJ
+    if (!isObject(data)) {
-        ? (instance.data = reactive({}))
+      __DEV__ && warn(`data() should return an object.`)
-        : instance.data
+    } else if (instance.data === EMPTY_OBJ) {
-    extend(data, isFunction(dataOptions) ? dataOptions.call(ctx) : dataOptions)
+      instance.data = reactive(data)
+    } else {
+      // existing data: this is a mixin or extends.
+      extend(instance.data, data)
+    }
   }
   if (computedOptions) {
     for (const key in computedOptions) {

packages/runtime-core/src/component.ts

@@ -3,7 +3,7 @@ import { ReactiveEffect, reactive, readonly } from '@vue/reactivity'
 import {
   PublicInstanceProxyHandlers,
   ComponentPublicInstance
-} from './componentPublicInstanceProxy'
+} from './componentProxy'
 import { ComponentPropsOptions } from './componentProps'
 import { Slots } from './componentSlots'
 import { warn } from './warning'
@@ -14,7 +14,7 @@ import {
 } from './errorHandling'
 import { AppContext, createAppContext } from './apiApp'
 import { Directive } from './directives'
-import { applyOptions, ComponentOptions } from './componentOptions'
+import { applyOptions, ComponentOptions } from './apiOptions'
 import {
   EMPTY_OBJ,
   isFunction,

packages/runtime-core/src/componentProxy.ts

@@ -2,7 +2,7 @@ import { ComponentInternalInstance, Data } from './component'
 import { nextTick } from './scheduler'
 import { instanceWatch } from './apiWatch'
 import { EMPTY_OBJ, hasOwn } from '@vue/shared'
-import { ExtracComputedReturns } from './componentOptions'
+import { ExtracComputedReturns } from './apiOptions'
 import { UnwrapRef } from '@vue/reactivity'
 
 // public properties exposed on the proxy, which is used as the render context

packages/runtime-core/src/createRenderer.ts

@@ -42,7 +42,7 @@ import { resolveSlots } from './componentSlots'
 import { ShapeFlags } from './shapeFlags'
 import { pushWarningContext, popWarningContext, warn } from './warning'
 import { invokeDirectiveHook } from './directives'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
 import { App, createAppAPI } from './apiApp'
 import {
   SuspenseBoundary,

packages/runtime-core/src/directives.ts

@@ -17,7 +17,7 @@ import { warn } from './warning'
 import { ComponentInternalInstance } from './component'
 import { currentRenderingInstance } from './componentRenderUtils'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
-import { ComponentPublicInstance } from './componentPublicInstanceProxy'
+import { ComponentPublicInstance } from './componentProxy'
 
 export interface DirectiveBinding {
   instance: ComponentPublicInstance | null

packages/runtime-core/src/h.ts

@@ -15,7 +15,7 @@ import {
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithProps,
   ComponentOptions
-} from './componentOptions'
+} from './apiOptions'
 import { ExtractPropTypes } from './componentProps'
 
 // `h` is a more user-friendly version of `createVNode` that allows omitting the

packages/runtime-core/src/index.ts

@@ -64,9 +64,9 @@ export {
   ComponentOptionsWithoutProps,
   ComponentOptionsWithProps,
   ComponentOptionsWithArrayProps
-} from './componentOptions'
+} from './apiOptions'
 
-export { ComponentPublicInstance } from './componentPublicInstanceProxy'
+export { ComponentPublicInstance } from './componentProxy'
 export { RendererOptions } from './createRenderer'
 export { Slot, Slots } from './componentSlots'
 export { Prop, PropType, ComponentPropsOptions } from './componentProps'