Fix initial array data in setup() and script setup

Using setData or providing a data() function for an array property would not work correctly.

Author: KCMertens

src/createInstance.ts

@@ -9,7 +9,8 @@ import {
   ComponentOptions,
   ConcreteComponent,
   DefineComponent,
-  transformVNodeArgs
+  transformVNodeArgs,
+  proxyRefs
 } from 'vue'
 
 import { MountingOptions, Slot } from './types'
@@ -20,6 +21,7 @@ import {
   isObject,
   isObjectComponent,
   isScriptSetup,
+  mergeDeep,
   mergeGlobalProperties
 } from './utils'
 import { processSlot } from './utils/compileSlots'
@@ -163,7 +165,7 @@ export function createInstance(
         const originalSetupFn = objectComponent.setup
         objectComponent.setup = function (a, b) {
           const data = originalSetupFn(a, b)
-          Object.assign(data, providedData)
+          mergeDeep(proxyRefs(data), providedData)
           return data
         }
       } else {

src/vueWrapper.ts

@@ -1,5 +1,4 @@
-import { nextTick, App, ComponentPublicInstance, VNode } from 'vue'
-import * as reactivity from '@vue/reactivity'
+import { nextTick, App, ComponentPublicInstance, VNode, proxyRefs } from 'vue'
 
 import { config } from './config'
 import domEvents from './constants/dom-events'
@@ -266,7 +265,7 @@ export class VueWrapper<
     } else if (!Object.isFrozen(this.componentVM.$.setupState)) {
       // data from setup() function when using the object api
       // @ts-ignore
-      mergeDeep(reactivity.proxyRefs(this.componentVM.$.setupState), data)
+      mergeDeep(proxyRefs(this.componentVM.$.setupState), data)
     } else {
       // data when using data: {...} in the object api
       mergeDeep(this.componentVM.$data, data)

tests/setData.spec.ts

@@ -308,4 +308,30 @@ describe('setData', () => {
 
     expect(wrapper.find('#show').exists()).toBe(true)
   })
+
+  it('correctly sets initial array refs data when using <script setup>', async () => {
+    const Component = {
+      template: `<div><div v-for="item in items" :key="item">{{ item }}</div></div>`,
+      setup() {
+        const items = ref([])
+        return { items }
+      }
+    }
+
+    const wrapper = shallowMount(Component, {
+      data() {
+        return {
+          items: ['item1', 'item2']
+        }
+      }
+    })
+
+    expect(wrapper.html()).toContain('item1')
+    expect(wrapper.html()).toContain('item2')
+
+    await wrapper.setData({ items: ['item3', 'item4'] })
+
+    expect(wrapper.html()).toContain('item3')
+    expect(wrapper.html()).toContain('item4')
+  })
 })