From 3e187936d9a9d5733f0c3f64ecc17842d98d32b0 Mon Sep 17 00:00:00 2001
From: acyza <101238421+acyza@users.noreply.github.com>
Date: Tue, 28 Mar 2023 18:16:29 +0800
Subject: [PATCH] feat(useResizeObserver): support element list (#2841)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/useResizeObserver/index.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/core/useResizeObserver/index.ts b/packages/core/useResizeObserver/index.ts
index c4681371011..4324626faaf 100644
--- a/packages/core/useResizeObserver/index.ts
+++ b/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 = () => {