fix(runtime-core): watching multiple sources: computed

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -30,6 +30,33 @@ import {
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
 
 describe('api: watch', () => {
+  it('watching sources: ref<any[]>', async () => {
+    const foo = ref([1])
+    const spy = jest.fn()
+    watch(foo, () => {
+      spy()
+    })
+    foo.value = foo.value.slice()
+    await nextTick()
+    expect(spy).toBeCalledTimes(1)
+  })
+
+  it('watching multiple sources: computed', async () => {
+    let count = 0
+    const value = ref('1')
+    const plus = computed(() => !!value.value)
+    watch([plus], () => {
+      count++
+    })
+    watch(plus, () => {
+      count++
+    })
+    value.value = '2'
+    await nextTick()
+    expect(plus.value).toBe(true)
+    expect(count).toBe(0)
+  })
+
   it('effect', async () => {
     const state = reactive({ count: 0 })
     let dummy

packages/runtime-core/src/apiWatch.ts

@@ -167,13 +167,15 @@ function doWatch(
 
   let getter: () => any
   let forceTrigger = false
+  let isSourceArray: boolean = false
   if (isRef(source)) {
     getter = () => (source as Ref).value
     forceTrigger = !!(source as Ref)._shallow
   } else if (isReactive(source)) {
     getter = () => source
     deep = true
   } else if (isArray(source)) {
+    isSourceArray = true
     getter = () =>
       source.map(s => {
         if (isRef(s)) {
@@ -248,7 +250,23 @@ function doWatch(
     if (cb) {
       // watch(source, cb)
       const newValue = runner()
-      if (deep || forceTrigger || hasChanged(newValue, oldValue)) {
+      let change: boolean = false
+
+      if (isSourceArray && isArray(newValue) && isArray(oldValue)) {
+        for (let i = 0; i < newValue.length && i < oldValue.length; i++) {
+          if (hasChanged(newValue[i], oldValue[i])) {
+            change = true
+            break
+          }
+          if (typeof newValue[i] === 'object') {
+            forceTrigger = true
+            break
+          }
+        }
+      } else {
+        change = hasChanged(newValue, oldValue)
+      }
+      if (deep || forceTrigger || change) {
         // cleanup before running cb again
         if (cleanup) {
           cleanup()