Merge eccd16e68e into 56be3dd4db

packages/reactivity/__tests__/reactiveArray.spec.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef, computed } from '../src/computed'
 import { isReactive, reactive, shallowReactive, toRaw } from '../src/reactive'
-import { isRef, ref } from '../src/ref'
+import { isRef, ref, toRef, triggerRef } from '../src/ref'
 import { effect } from '../src/effect'
 
 describe('reactivity/reactive/Array', () => {
@@ -279,6 +279,17 @@ describe('reactivity/reactive/Array', () => {
     expect(proxy).toHaveLength(1)
   })
 
+  // #12427
+  test('trigger the ref that is created by toRef from a reactive Array', () => {
+    const array = reactive<number[]>([1])
+    const first = toRef(array, 0)
+    const fn = vi.fn()
+    effect(() => fn(first.value))
+    expect(fn).toHaveBeenCalledTimes(1)
+    triggerRef(first)
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
   describe('Array methods w/ refs', () => {
     let original: any[]
     beforeEach(() => {

packages/reactivity/src/dep.ts

@@ -387,5 +387,7 @@ export function getDepFromReactive(
   key: string | number | symbol,
 ): Dep | undefined {
   const depMap = targetMap.get(object)
+  // #12427, while the target object is an array, the dep key(array index) must be string
+  if (isArray(object) && typeof key === 'number') key = key.toString()
   return depMap && depMap.get(key)
 }