From cbd737a53ad66f977afef0c890d3d9275e2c4a4c Mon Sep 17 00:00:00 2001
From: Brandon Reid <brandonreidak@gmail.com>
Date: Wed, 30 Aug 2023 12:18:03 -0300
Subject: [PATCH 1/2] fix usePositionStickyObserver reactivity

---
 .../useIntersectionObserver.ts                | 36 ++++++++++---------
 .../usePositionStickyObserver.ts              |  9 +++--
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/useIntersectionObserver/useIntersectionObserver.ts b/src/useIntersectionObserver/useIntersectionObserver.ts
index b743a773..d44b3ad4 100644
--- a/src/useIntersectionObserver/useIntersectionObserver.ts
+++ b/src/useIntersectionObserver/useIntersectionObserver.ts
@@ -1,11 +1,12 @@
 import { onMounted, onUnmounted, ref, Ref, unref, watch } from 'vue'
-import { MaybeRef } from '@/types/maybe'
+import { MaybeRef, MaybeRefOrGetter } from '@/types/maybe'
+import { toValue } from '@/utilities/vue'
 
 export type UseIntersectionObserverResponse = {
-  observe: (element: Ref<HTMLElement | undefined>) => void,
-  unobserve: (element: Ref<HTMLElement | undefined>) => void,
+  observe: (element: MaybeRefOrGetter<HTMLElement | undefined>) => void,
+  unobserve: (element: MaybeRefOrGetter<HTMLElement | undefined>) => void,
   disconnect: () => void,
-  check: (element: Ref<HTMLElement | undefined>) => void,
+  check: (element: MaybeRefOrGetter<HTMLElement | undefined>) => void,
 }
 
 export type UseIntersectionObserverOptions = {
@@ -22,22 +23,23 @@ export function useIntersectionObserver(callback: UseIntersectionObserverCallbac
 
   let intersectionObserver: IntersectionObserver | null = null
 
-  function observe(element: Ref<HTMLElement | undefined>): void {
+  function observe(element: MaybeRefOrGetter<HTMLElement | undefined>): void {
+    const value = toValue(element)
     const observer = getObserver()
 
-    if (element.value) {
-      observer.observe(element.value)
-      elements.add(element.value)
+    if (value) {
+      observer.observe(value)
+      elements.add(value)
     }
-
   }
 
-  function unobserve(element: Ref<HTMLElement | undefined>): void {
+  function unobserve(element: MaybeRefOrGetter<HTMLElement | undefined>): void {
+    const value = toValue(element)
     const observer = getObserver()
 
-    if (element.value) {
-      observer.unobserve(element.value)
-      elements.delete(element.value)
+    if (value) {
+      observer.unobserve(value)
+      elements.delete(value)
     }
   }
 
@@ -56,14 +58,16 @@ export function useIntersectionObserver(callback: UseIntersectionObserverCallbac
     }
   }
 
-  function check(element: Ref<HTMLElement | undefined>): void {
-    if (!element.value) {
+  function check(element: MaybeRefOrGetter<HTMLElement | undefined>): void {
+    const value = toValue(element)
+
+    if (!value) {
       return
     }
 
     const observer = new IntersectionObserver(callback, getOptions(optionsRef.value))
 
-    observer.observe(element.value)
+    observer.observe(value)
 
     setTimeout(() => observer.disconnect(), 100)
   }
diff --git a/src/usePositionStickyObserver/usePositionStickyObserver.ts b/src/usePositionStickyObserver/usePositionStickyObserver.ts
index c1df2c51..77c63099 100644
--- a/src/usePositionStickyObserver/usePositionStickyObserver.ts
+++ b/src/usePositionStickyObserver/usePositionStickyObserver.ts
@@ -1,4 +1,4 @@
-import { Ref, computed, onMounted, ref } from 'vue'
+import { Ref, computed, ref, watch } from 'vue'
 import { MaybeRefOrGetter } from '@/types/maybe'
 import { useIntersectionObserver } from '@/useIntersectionObserver'
 import { toValue } from '@/utilities/vue'
@@ -42,9 +42,12 @@ export function usePositionStickyObserver(
     })
   }
 
-  const { observe } = useIntersectionObserver(intersect, observerOptions)
+  const { observe, unobserve } = useIntersectionObserver(intersect, observerOptions)
 
-  onMounted(() => observe(elementRef))
+  watch(elementRef, (newVal, oldVal) => {
+    unobserve(oldVal)
+    observe(newVal)
+  }, { immediate: true })
 
   return {
     stuck,

From a3135f86ee60fcdbcf4e0dae7a9bc2f803a0e538 Mon Sep 17 00:00:00 2001
From: Brandon Reid <brandonreidak@gmail.com>
Date: Wed, 30 Aug 2023 12:24:43 -0300
Subject: [PATCH 2/2] add usePositionStickyObserver to the root README

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f9981ce7..57d4a2e8 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ npm i --save @prefecthq/vue-compositions
 - [useMutationObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/useMutationObserver)
 - [useNow](https://github.com/prefecthq/vue-compositions/tree/main/src/useNow)
 - [usePatchRef](https://github.com/prefecthq/vue-compositions/tree/main/src/usePatchRef)
+- [usePositionStickyObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/usePositionStickyObserver)
 - [useResizeObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/useResizeObserver)
 - [useRouteParam](https://github.com/prefecthq/vue-compositions/tree/main/src/useRouteParam)
 - [useRouteQuery](https://github.com/prefecthq/vue-compositions/tree/main/src/useRouteQuery)
@@ -35,4 +36,4 @@ npm i --save @prefecthq/vue-compositions
 - [useSubscription](https://github.com/prefecthq/vue-compositions/tree/main/src/useSubscription)
 - [useValidation](https://github.com/prefecthq/vue-compositions/tree/main/src/useValidation)
 - [useValidationObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/useValidationObserver)
-- [useVisibilityObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/useVisibilityObserver)
\ No newline at end of file
+- [useVisibilityObserver](https://github.com/prefecthq/vue-compositions/tree/main/src/useVisibilityObserver)