Merge pull request #102 from PrefectHQ/moved-watcher-after-init

chore: fixed watcher before init error
PrefectHQ · Sep 13, 2022 · 38eada3 · 38eada3
2 parents 78261c1 + 9b8bb50
commit 38eada3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@prefecthq/vue-compositions",
   "private": false,
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "A collection of reusable vue compositions.",
   "main": "index.ts",
   "scripts": {

diff --git a/src/useComputedStyle/useComputedStyle.ts b/src/useComputedStyle/useComputedStyle.ts
@@ -8,17 +8,6 @@ export function useComputedStyle(element: Element | Ref<Element | undefined>): T
   const elementRef = ref(element)
   const style = reactive({})
 
-  watch(elementRef, element => {
-    if (element && globalExists('window')) {
-      Object.assign(style, window.getComputedStyle(element, null))
-
-      mutationObserver.disconnect()
-      mutationObserver.observe(elementRef, { attributes: true })
-      resizeObserver.disconnect()
-      resizeObserver.observe(elementRef)
-    }
-  }, { immediate: true })
-
   function handleMutation([entry]: MutationRecord[]): void {
     if (nodeIsElement(entry.target) && globalExists('window')) {
       Object.assign(style, window.getComputedStyle(entry.target, null))
@@ -33,6 +22,17 @@ export function useComputedStyle(element: Element | Ref<Element | undefined>): T
   }
   const resizeObserver = useResizeObserver(handleResize)
 
+  watch(elementRef, element => {
+    if (element && globalExists('window')) {
+      Object.assign(style, window.getComputedStyle(element, null))
+
+      mutationObserver.disconnect()
+      mutationObserver.observe(elementRef, { attributes: true, childList: true })
+      resizeObserver.disconnect()
+      resizeObserver.observe(elementRef)
+    }
+  }, { immediate: true })
+
   return toRefs(style)
 }