feat(useResizeObserver): support element list (#2841)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useResizeObserver/index.ts

@@ -1,5 +1,5 @@
 import { tryOnScopeDispose } from '@vueuse/shared'
-import { watch } from 'vue-demi'
+import { computed, watch } from 'vue-demi'
 import type { MaybeComputedElementRef } from '../unrefElement'
 import { unrefElement } from '../unrefElement'
 import { useSupported } from '../useSupported'
@@ -47,7 +47,7 @@ declare class ResizeObserver {
  * @param options
  */
 export function useResizeObserver(
-  target: MaybeComputedElementRef,
+  target: MaybeComputedElementRef | MaybeComputedElementRef[],
   callback: ResizeObserverCallback,
   options: UseResizeObserverOptions = {},
 ) {
@@ -62,17 +62,23 @@ export function useResizeObserver(
     }
   }
 
+  const targets = computed(() =>
+    Array.isArray(target)
+      ? target.map(el => unrefElement(el))
+      : [unrefElement(target)],
+  )
+
   const stopWatch = watch(
-    () => unrefElement(target),
-    (el) => {
+    targets,
+    (els) => {
       cleanup()
-
-      if (isSupported.value && window && el) {
+      if (isSupported.value && window) {
         observer = new ResizeObserver(callback)
-        observer!.observe(el, observerOptions)
+        for (const _el of els)
+          _el && observer!.observe(_el, observerOptions)
       }
     },
-    { immediate: true, flush: 'post' },
+    { immediate: true, flush: 'post', deep: true },
   )
 
   const stop = () => {