fix(useVirtualList): resolve invalid watch source (#4857)

cszhjh · OrbisK · autofix-ci[bot] · web-flow · commit d23812dbebec · 2025-07-11T13:56:40.000Z
Co-authored-by: Robin &lt;robin.kehl@singular-it.de&gt;
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/packages/core/useVirtualList/index.test.ts b/packages/core/useVirtualList/index.test.ts
@@ -6,6 +6,19 @@ describe('useVirtualList', () => {
   it('should be defined', () => {
     expect(useVirtualList).toBeDefined()
   })
+
+  it('should accept plain arrays as input', () => {
+    const {
+      list,
+      containerProps: { ref: containerRef },
+      scrollTo,
+    } = useVirtualList(['a', 'b', 'c', 'd', 'e', 'f'], { itemHeight: () => 50 })
+    const div = { ...document.createElement('div'), clientHeight: 100 }
+
+    containerRef.value = div
+    scrollTo(0)
+    expect(list.value.map(i => i.data)).toEqual(['a', 'b', 'c', 'd', 'e', 'f'])
+  })
 })
 
 describe('useVirtualList, vertical', () => {
diff --git a/packages/core/useVirtualList/index.ts b/packages/core/useVirtualList/index.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, MaybeRef, Ref, ShallowRef, StyleValue } from 'vue'
-import { computed, ref as deepRef, shallowRef, watch } from 'vue'
+import { computed, ref as deepRef, shallowRef, toValue, watch } from 'vue'
 import { useElementSize } from '../useElementSize'
 
 type UseVirtualListItemSize = number | ((index: number) => number)
@@ -201,7 +201,7 @@ function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtu
 }
 
 function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<readonly T[]>, containerRef: Ref<HTMLElement | null>, calculateRange: () => void) {
-  watch([size.width, size.height, list, containerRef], () => {
+  watch([size.width, size.height, () => toValue(list), containerRef], () => {
     calculateRange()
   })
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import type { ComputedRef, MaybeRef, Ref, ShallowRef, StyleValue } from 'vue'`
`2`		`-import { computed, ref as deepRef, shallowRef, watch } from 'vue'`
	`2`	`+import { computed, ref as deepRef, shallowRef, toValue, watch } from 'vue'`
`3`	`3`	`import { useElementSize } from '../useElementSize'`
`4`	`4`
`5`	`5`	`type UseVirtualListItemSize = number \| ((index: number) => number)`
`@@ -201,7 +201,7 @@ function createGetDistance<T>(itemSize: UseVirtualListItemSize, source: UseVirtu`
`201`	`201`	`}`
`202`	`202`
`203`	`203`	`function useWatchForSizes<T>(size: UseVirtualElementSizes, list: MaybeRef<readonly T[]>, containerRef: Ref<HTMLElement \| null>, calculateRange: () => void) {`
`204`		`- watch([size.width, size.height, list, containerRef], () => {`
	`204`	`+ watch([size.width, size.height, () => toValue(list), containerRef], () => {`
`205`	`205`	`calculateRange()`
`206`	`206`	`})`
`207`	`207`	`}`