diff --git a/packages/radix-vue/src/DismissableLayer/utils.ts b/packages/radix-vue/src/DismissableLayer/utils.ts
index 3a8358a50..fd48a820c 100644
--- a/packages/radix-vue/src/DismissableLayer/utils.ts
+++ b/packages/radix-vue/src/DismissableLayer/utils.ts
@@ -1,4 +1,5 @@
 import { isClient } from '@vueuse/shared'
+import { useEventListener } from '@vueuse/core'
 import { handleAndDispatchCustomEvent } from '@/shared'
 import { type Ref, nextTick, ref, watchEffect } from 'vue'
 
@@ -30,12 +31,11 @@ function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
     (targetLayer
     && mainLayer === targetLayer)
     || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)
-  ) {
+  )
     return true
-  }
-  else {
+
+  else
     return false
-  }
 }
 
 /**
@@ -53,6 +53,9 @@ export function usePointerDownOutside(
   const isPointerInsideDOMTree = ref(false)
   const handleClickRef = ref(() => {})
 
+  let ownerDocumentClickCleanup: ReturnType<typeof useEventListener>
+  let ownerDocumentPointerdownCleanup: ReturnType<typeof useEventListener>
+
   watchEffect((cleanupFn) => {
     if (!isClient)
       return
@@ -93,7 +96,7 @@ export function usePointerDownOutside(
         if (event.pointerType === 'touch') {
           ownerDocument.removeEventListener('click', handleClickRef.value)
           handleClickRef.value = handleAndDispatchPointerDownOutsideEvent
-          ownerDocument.addEventListener('click', handleClickRef.value, {
+          ownerDocumentClickCleanup = useEventListener(ownerDocument, 'click', handleClickRef.value, {
             once: true,
           })
         }
@@ -104,7 +107,7 @@ export function usePointerDownOutside(
       else {
         // We need to remove the event listener in case the outside click has been canceled.
         // See: https://github.com/radix-ui/primitives/issues/2171
-        ownerDocument.removeEventListener('click', handleClickRef.value)
+        ownerDocumentClickCleanup && ownerDocumentClickCleanup()
       }
       isPointerInsideDOMTree.value = false
     }
@@ -122,13 +125,12 @@ export function usePointerDownOutside(
      * });
      */
     const timerId = window.setTimeout(() => {
-      ownerDocument.addEventListener('pointerdown', handlePointerDown)
+      ownerDocumentPointerdownCleanup = useEventListener(ownerDocument, 'pointerdown', handlePointerDown)
     }, 0)
 
     cleanupFn(() => {
       window.clearTimeout(timerId)
-      ownerDocument.removeEventListener('pointerdown', handlePointerDown)
-      ownerDocument.removeEventListener('click', handleClickRef.value)
+      ownerDocumentPointerdownCleanup && ownerDocumentPointerdownCleanup()
     })
   })
 
@@ -148,6 +150,8 @@ export function useFocusOutside(
   const ownerDocument: Document
     = element?.value?.ownerDocument ?? globalThis?.document
 
+  let ownerDocumentFocusinCleanup: ReturnType<typeof useEventListener>
+
   const isFocusInsideDOMTree = ref(false)
   watchEffect((cleanupFn) => {
     if (!isClient)
@@ -170,9 +174,9 @@ export function useFocusOutside(
       }
     }
 
-    ownerDocument.addEventListener('focusin', handleFocus)
+    ownerDocumentFocusinCleanup = useEventListener(ownerDocument, 'focusin', handleFocus)
 
-    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))
+    cleanupFn(() => ownerDocumentFocusinCleanup())
   })
 
   return {
diff --git a/packages/radix-vue/src/FocusScope/FocusScope.vue b/packages/radix-vue/src/FocusScope/FocusScope.vue
index 38630a015..5c10ad91e 100644
--- a/packages/radix-vue/src/FocusScope/FocusScope.vue
+++ b/packages/radix-vue/src/FocusScope/FocusScope.vue
@@ -35,6 +35,7 @@ export interface FocusScopeProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { nextTick, reactive, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { isClient } from '@vueuse/shared'
 import {
   AUTOFOCUS_ON_MOUNT,
@@ -68,7 +69,7 @@ const focusScope = reactive({
   },
 })
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   if (!isClient)
     return
   const container = currentElement.value
@@ -122,20 +123,21 @@ watchEffect((cleanupFn) => {
       focus(container)
   }
 
-  document.addEventListener('focusin', handleFocusIn)
-  document.addEventListener('focusout', handleFocusOut)
+  const documentFocusInCleanup = useEventListener(document, 'focusin', handleFocusIn)
+  const documentFocusOutCleanup = useEventListener(document, 'focusout', handleFocusOut)
+
   const mutationObserver = new MutationObserver(handleMutations)
   if (container)
     mutationObserver.observe(container, { childList: true, subtree: true })
 
-  cleanupFn(() => {
-    document.removeEventListener('focusin', handleFocusIn)
-    document.removeEventListener('focusout', handleFocusOut)
+  onCleanup(() => {
+    documentFocusInCleanup()
+    documentFocusOutCleanup()
     mutationObserver.disconnect()
   })
 })
 
-watchEffect(async (cleanupFn) => {
+watchEffect(async (onCleanup) => {
   const container = currentElement.value
 
   await nextTick()
@@ -160,7 +162,7 @@ watchEffect(async (cleanupFn) => {
     }
   }
 
-  cleanupFn(() => {
+  onCleanup(() => {
     container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
       emits('mountAutoFocus', ev))
 
@@ -168,7 +170,9 @@ watchEffect(async (cleanupFn) => {
     const unmountEventHandler = (ev: Event) => {
       emits('unmountAutoFocus', ev)
     }
-    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+
+    const stop = useEventListener(container, AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+
     container.dispatchEvent(unmountEvent)
 
     setTimeout(() => {
@@ -176,7 +180,7 @@ watchEffect(async (cleanupFn) => {
         focus(previouslyFocusedElement ?? document.body, { select: true })
 
       // we need to remove the listener after we `dispatchEvent`
-      container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler)
+      stop()
 
       focusScopesStack.remove(focusScope)
     }, 0)
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
index e4689190f..f79cf9beb 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
@@ -10,6 +10,7 @@ export interface HoverCardContentImplProps extends PopperContentProps {}
 
 <script setup lang="ts">
 import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectHoverCardRootContext } from './HoverCardRoot.vue'
 import { PopperContent } from '@/Popper'
 import { DismissableLayer } from '@/DismissableLayer'
@@ -63,7 +64,7 @@ function handlePointerUp() {
 }
 onMounted(() => {
   if (contentElement.value) {
-    document.addEventListener('pointerup', handlePointerUp)
+    useEventListener(document, 'pointerup', handlePointerUp)
 
     const tabbables = getTabbableNodes(contentElement.value)
     tabbables.forEach(tabbable => tabbable.setAttribute('tabindex', '-1'))
@@ -71,7 +72,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  document.removeEventListener('pointerup', handlePointerUp)
   rootContext.hasSelectionRef.value = false
   rootContext.isPointerDownOnContentRef.value = false
 })
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index f2b66b093..7d2e4913d 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -15,6 +15,7 @@ export interface NavigationMenuContentImplProps extends DismissableLayerProps {}
 
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   EVENT_ROOT_CONTENT_DISMISS,
@@ -107,7 +108,7 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
   }
 }
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   const content = currentElement.value
   if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
@@ -117,11 +118,12 @@ watchEffect((cleanupFn) => {
       if (content.contains(document.activeElement))
         itemContext.triggerRef.value?.focus()
     }
-    content.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose)
 
-    cleanupFn(() =>
-      content.removeEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose),
-    )
+    const documentDismissCleanup = useEventListener(document, EVENT_ROOT_CONTENT_DISMISS, handleClose)
+
+    onCleanup(() => {
+      documentDismissCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
index 6766d4048..d8a5e6fa8 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
@@ -6,6 +6,7 @@ export interface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoPr
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
 import { Presence } from '@/Presence'
@@ -38,18 +39,15 @@ onMounted(() => {
   const scrollArea = rootContext.scrollArea.value
 
   if (scrollArea) {
-    scrollArea.addEventListener('pointerenter', handlePointerEnter)
-    scrollArea.addEventListener('pointerleave', handlePointerLeave)
+    useEventListener(scrollArea, 'pointerenter', handlePointerEnter)
+    useEventListener(scrollArea, 'pointerleave', handlePointerLeave)
   }
 })
 
 onUnmounted(() => {
   const scrollArea = rootContext.scrollArea.value
-  if (scrollArea) {
+  if (scrollArea)
     window.clearTimeout(timeout)
-    scrollArea.removeEventListener('pointerenter', handlePointerEnter)
-    scrollArea.removeEventListener('pointerleave', handlePointerLeave)
-  }
 })
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index 81a5c39dd..0ae71e739 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -11,8 +11,8 @@ export interface ScrollAreaScrollbarImplProps {
 </script>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
@@ -83,10 +83,7 @@ function handleWheel(event: WheelEvent) {
 }
 
 onMounted(() => {
-  document.addEventListener('wheel', handleWheel, { passive: false })
-})
-onUnmounted(() => {
-  document.removeEventListener('wheel', handleWheel)
+  useEventListener(document, 'wheel', handleWheel, { passive: false })
 })
 
 function handleSizeChange() {
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index 64502831c..737b79ba2 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -6,7 +6,7 @@ export interface ScrollAreaScrollbarScrollProps {
 
 <script setup lang="ts">
 import { watchEffect } from 'vue'
-import { useDebounceFn } from '@vueuse/core'
+import { useDebounceFn, useEventListener } from '@vueuse/core'
 import { useStateMachine } from '../shared/useStateMachine'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
@@ -72,10 +72,11 @@ watchEffect((onCleanup) => {
       }
       prevScrollPos = scrollPos
     }
-    viewport.addEventListener('scroll', handleScroll)
+
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
 
     onCleanup(() => {
-      viewport.removeEventListener('scroll', handleScroll)
+      viewportScrollCleanup()
     })
   }
 })
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
index ff7468db3..81b7b9f09 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
@@ -7,7 +7,7 @@ export interface ScrollAreaThumbProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { computed, onUnmounted, ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
+import { useEventListener, watchOnce } from '@vueuse/core'
 import { Primitive } from '@/Primitive'
 import { addUnlinkedScrollListener } from './utils'
 import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
@@ -58,12 +58,12 @@ watchOnce(sizes, () => {
      * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
      */
     scrollbarContextVisible.onThumbPositionChange()
-    viewport.value.addEventListener('scroll', handleScroll)
+
+    useEventListener(viewport, 'scroll', handleScroll)
   }
 })
 
 onUnmounted(() => {
-  viewport.value!.removeEventListener('scroll', handleScroll)
   rootContext.viewport.value?.removeEventListener('scroll', handleScroll)
 })
 </script>
diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
index 99b515a3f..ffde01b90 100644
--- a/packages/radix-vue/src/Select/SelectContentImpl.vue
+++ b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -85,7 +85,7 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import { unrefElement } from '@vueuse/core'
+import { unrefElement, useEventListener } from '@vueuse/core'
 import { injectSelectRootContext } from './SelectRoot.vue'
 import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'
 import SelectPopperPosition from './SelectPopperPosition.vue'
@@ -130,7 +130,10 @@ watch(isPositioned, () => {
 // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
 // and close on `pointerup` outside.
 const { onOpenChange, triggerPointerDownPosRef } = rootContext
-watchEffect((cleanupFn) => {
+
+let documentPointermoveCleanup: ReturnType<typeof useEventListener>
+
+watchEffect((onCleanup) => {
   if (!content.value)
     return
   let pointerMoveDelta = { x: 0, y: 0 }
@@ -160,20 +163,20 @@ watchEffect((cleanupFn) => {
       if (!content.value?.contains(event.target as HTMLElement))
         onOpenChange(false)
     }
-    document.removeEventListener('pointermove', handlePointerMove)
+    documentPointermoveCleanup = useEventListener(document, 'pointermove', handlePointerMove)
     triggerPointerDownPosRef.value = null
   }
 
   if (triggerPointerDownPosRef.value !== null) {
-    document.addEventListener('pointermove', handlePointerMove)
+    documentPointermoveCleanup = useEventListener(document, 'pointermove', handlePointerMove)
     document.addEventListener('pointerup', handlePointerUp, {
       capture: true,
       once: true,
     })
   }
 
-  cleanupFn(() => {
-    document.removeEventListener('pointermove', handlePointerMove)
+  onCleanup(() => {
+    documentPointermoveCleanup && documentPointermoveCleanup()
     document.removeEventListener('pointerup', handlePointerUp, {
       capture: true,
     })
diff --git a/packages/radix-vue/src/Select/SelectScrollDownButton.vue b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
index 51c6192ae..40abb51a0 100644
--- a/packages/radix-vue/src/Select/SelectScrollDownButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
@@ -7,6 +7,7 @@ export interface SelectScrollDownButtonProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { ref, watch, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
@@ -23,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollDown = ref(false)
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -34,9 +35,12 @@ watchEffect((cleanupFn) => {
       canScrollDown.value = Math.ceil(viewport.scrollTop) < maxScroll
     }
     handleScroll()
-    viewport.addEventListener('scroll', handleScroll)
 
-    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+    onCleanup(() => {
+      viewportScrollCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/Select/SelectScrollUpButton.vue b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
index 4a9a4e5e5..87c8c8df1 100644
--- a/packages/radix-vue/src/Select/SelectScrollUpButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
@@ -7,6 +7,7 @@ export interface SelectScrollUpButtonProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { ref, watch, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
@@ -23,7 +24,7 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const canScrollUp = ref(false)
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
     const viewport = contentContext.viewport.value
 
@@ -31,9 +32,12 @@ watchEffect((cleanupFn) => {
       canScrollUp.value = viewport.scrollTop > 0
     }
     handleScroll()
-    viewport.addEventListener('scroll', handleScroll)
 
-    cleanupFn(() => viewport.removeEventListener('scroll', handleScroll))
+    const viewportScrollCleanup = useEventListener(viewport, 'scroll', handleScroll)
+
+    onCleanup(() => {
+      viewportScrollCleanup()
+    })
   }
 })
 
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
index 81ef48439..c6e44af61 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterBehavior.ts
@@ -2,6 +2,7 @@ import { type Ref, watchEffect } from 'vue'
 import type { ResizeHandler } from '../types'
 import { assert } from '../assert'
 import { getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup } from '../dom'
+import { useEventListener } from '@vueuse/core'
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
@@ -75,9 +76,10 @@ export function useWindowSplitterResizeHandlerBehavior({
       }
     }
 
-    handleElement.addEventListener('keydown', onKeyDown)
+    const handleElementKeydownCleanup = useEventListener(handleElement, 'keydown', onKeyDown)
+
     onCleanup(() => {
-      handleElement.removeEventListener('keydown', onKeyDown)
+      handleElementKeydownCleanup()
     })
   })
 }
diff --git a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
index 1b59c683f..3aa0412a9 100644
--- a/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
+++ b/packages/radix-vue/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts
@@ -6,6 +6,7 @@ import { calculateAriaValues } from '../calculate'
 import { determinePivotIndices } from '../pivot'
 import { getPanelGroupElement, getResizeHandleElementsForGroup, getResizeHandlePanelIds } from '../dom'
 import { fuzzyNumbersEqual } from '../compare'
+import { useEventListener } from '@vueuse/core'
 
 // https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
@@ -154,9 +155,10 @@ export function useWindowSplitterPanelGroupBehavior({
         }
       }
 
-      handle.addEventListener('keydown', onKeyDown)
+      const handleKeydownCleanup = useEventListener(handle, 'keydown', onKeyDown)
+
       return () => {
-        handle.removeEventListener('keydown', onKeyDown)
+        handleKeydownCleanup()
       }
     })
 
diff --git a/packages/radix-vue/src/Toast/ToastRootImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
index 2499d7d24..0cf86c30b 100644
--- a/packages/radix-vue/src/Toast/ToastRootImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -48,7 +48,7 @@ import { Primitive } from '@/Primitive'
 import { computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { injectToastProviderContext } from './ToastProvider.vue'
 import { TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME, getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'
-import { onKeyStroke, useRafFn } from '@vueuse/core'
+import { onKeyStroke, useEventListener, useRafFn } from '@vueuse/core'
 import ToastAnnounce from './ToastAnnounce.vue'
 
 defineOptions({
@@ -110,7 +110,7 @@ if (props.type && !['foreground', 'background'].includes(props.type)) {
   throw new Error(error)
 }
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   const viewport = providerContext.viewport.value
   if (viewport) {
     const handleResume = () => {
@@ -125,12 +125,14 @@ watchEffect((cleanupFn) => {
       remainingRaf.pause()
       emits('pause')
     }
-    viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
-    viewport.addEventListener(VIEWPORT_RESUME, handleResume)
-    return () => {
-      viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
-      viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
-    }
+
+    const viewportPauseCleanup = useEventListener(viewport, VIEWPORT_PAUSE, handlePause)
+    const viewportResumeCleanup = useEventListener(viewport, VIEWPORT_RESUME, handleResume)
+
+    onCleanup(() => {
+      viewportPauseCleanup()
+      viewportResumeCleanup()
+    })
   }
 })
 
@@ -243,9 +245,9 @@ provideToastRootContext({ onClose: handleClose })
           }
           // Prevent click event from triggering on items within the toast when
           // pointer up is part of a swipe gesture
-          toast?.addEventListener('click', (event) => event.preventDefault(), {
+          useEventListener(() => toast, 'click', (event) => event.preventDefault(), {
             once: true,
-          });
+          })
         }
       }"
     >
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index f28108646..b421f9865 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -22,7 +22,7 @@ export interface ToastViewportProps extends PrimitiveProps {
 import { computed, onMounted, ref, toRefs, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
 import { injectToastProviderContext } from './ToastProvider.vue'
-import { onKeyStroke, unrefElement } from '@vueuse/core'
+import { onKeyStroke, unrefElement, useEventListener } from '@vueuse/core'
 import FocusProxy from './FocusProxy.vue'
 import { focusFirst, getTabbableCandidates } from '@/FocusScope/utils'
 import { useCollection, useForwardExpose } from '@/shared'
@@ -58,7 +58,7 @@ onMounted(() => {
   providerContext.onViewportChange(currentElement.value)
 })
 
-watchEffect((cleanupFn) => {
+watchEffect((onCleanup) => {
   const viewport = currentElement.value
   if (hasToasts.value && viewport) {
     const handlePause = () => {
@@ -125,22 +125,20 @@ watchEffect((cleanupFn) => {
       }
     }
 
-    viewport.addEventListener('focusin', handlePause)
-    viewport.addEventListener('focusout', handleFocusOutResume)
-    viewport.addEventListener('pointermove', handlePause)
-    viewport.addEventListener('pointerleave', handlePointerLeaveResume)
-    viewport.addEventListener('keydown', handleKeyDown)
-    window.addEventListener('blur', handlePause)
-    window.addEventListener('focus', handleResume)
-
-    cleanupFn(() => {
-      viewport.removeEventListener('focusin', handlePause)
-      viewport.removeEventListener('focusout', handleFocusOutResume)
-      viewport.removeEventListener('pointermove', handlePause)
-      viewport.removeEventListener('pointerleave', handlePointerLeaveResume)
-      viewport.removeEventListener('keydown', handleKeyDown)
-      window.removeEventListener('blur', handlePause)
-      window.removeEventListener('focus', handleResume)
+    const viewportEventsCleanup = useEventListener(viewport, ['focusin', 'pointermove'], handlePause)
+    const viewportFocusoutCleanup = useEventListener(viewport, 'focusout', handleFocusOutResume)
+    const viewportPointerLeaveCleanup = useEventListener(viewport, 'pointerleave', handlePointerLeaveResume)
+    const viewportKeydownCleanup = useEventListener(viewport, 'keydown', handleKeyDown)
+    const windowBlurCleanup = useEventListener(window, 'blur', handlePause)
+    const windowFocusCleanup = useEventListener(window, 'focus', handleResume)
+
+    onCleanup(() => {
+      viewportEventsCleanup()
+      viewportFocusoutCleanup()
+      viewportPointerLeaveCleanup()
+      viewportKeydownCleanup()
+      windowBlurCleanup()
+      windowFocusCleanup()
     })
   }
 })
diff --git a/packages/radix-vue/src/Toast/utils.ts b/packages/radix-vue/src/Toast/utils.ts
index 6cf30bbb2..0bd3715e6 100644
--- a/packages/radix-vue/src/Toast/utils.ts
+++ b/packages/radix-vue/src/Toast/utils.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export const TOAST_SWIPE_START = 'toast.swipeStart'
 export const TOAST_SWIPE_MOVE = 'toast.swipeMove'
 export const TOAST_SWIPE_CANCEL = 'toast.swipeCancel'
@@ -32,7 +34,7 @@ export function handleAndDispatchCustomEvent<
     detail,
   })
   if (handler)
-    currentTarget.addEventListener(name, handler as EventListener, { once: true })
+    useEventListener(currentTarget, name, handler as EventListener, { once: true })
 
   currentTarget.dispatchEvent(event)
 }
diff --git a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
index 402ce91da..07a570969 100644
--- a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useForwardExpose, useId } from '@/shared'
+import { useEventListener } from '@vueuse/core'
 
 export type TooltipTriggerDataState =
   | 'closed'
@@ -58,7 +59,7 @@ function handlePointerUp() {
 
 function handlePointerDown() {
   isPointerDown.value = true
-  document.addEventListener('pointerup', handlePointerUp, { once: true })
+  useEventListener(document, 'pointerup', handlePointerUp, { once: true })
 }
 
 function handlePointerMove(event: PointerEvent) {
diff --git a/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts b/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
index 16c869ad1..54bd1e38f 100644
--- a/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
+++ b/packages/radix-vue/src/shared/handleAndDispatchCustomEvent.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export function handleAndDispatchCustomEvent<
   E extends CustomEvent,
   OriginalEvent extends Event,
@@ -15,7 +17,7 @@ export function handleAndDispatchCustomEvent<
     detail,
   })
   if (handler)
-    target.addEventListener(name, handler as EventListener, { once: true })
+    useEventListener(target, handler as EventListener, { once: true })
 
   target.dispatchEvent(event)
 }
diff --git a/packages/radix-vue/src/shared/onFocusOutside.ts b/packages/radix-vue/src/shared/onFocusOutside.ts
index bc56bb111..bbd5d4c7d 100644
--- a/packages/radix-vue/src/shared/onFocusOutside.ts
+++ b/packages/radix-vue/src/shared/onFocusOutside.ts
@@ -1,5 +1,5 @@
-import { type MaybeElementRef, unrefElement } from '@vueuse/core'
-import { onMounted, onUnmounted } from 'vue'
+import { type MaybeElementRef, unrefElement, useEventListener } from '@vueuse/core'
+import { onMounted } from 'vue'
 
 export function onFocusOutside(
   element: MaybeElementRef,
@@ -17,12 +17,6 @@ export function onFocusOutside(
 
   onMounted(() => {
     const el = unrefElement(element)
-    // @ts-expect-error focusout should received FocusEvent
-    el?.addEventListener('focusout', handleFocusOut)
-  })
-  onUnmounted(() => {
-    const el = unrefElement(element)
-    // @ts-expect-error focusout should received FocusEvent
-    el?.removeEventListener('focusout', handleFocusOut)
+    useEventListener(el, 'focusout', handleFocusOut)
   })
 }
diff --git a/packages/radix-vue/src/shared/trap-focus.ts b/packages/radix-vue/src/shared/trap-focus.ts
index c3d95e6d2..3f740ce4b 100644
--- a/packages/radix-vue/src/shared/trap-focus.ts
+++ b/packages/radix-vue/src/shared/trap-focus.ts
@@ -1,3 +1,5 @@
+import { useEventListener } from '@vueuse/core'
+
 export function trapFocus(element: HTMLElement) {
   if (element) {
     const focusableEls = [
@@ -18,7 +20,7 @@ export function trapFocus(element: HTMLElement) {
     if (firstFocusableEl)
       firstFocusableEl.focus()
 
-    element.addEventListener('keydown', (e) => {
+    useEventListener(element, 'keydown', (e) => {
       const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB
 
       if (!isTabPressed)
@@ -38,6 +40,7 @@ export function trapFocus(element: HTMLElement) {
         }
       }
     })
+
     return firstFocusableEl
   }
 }
diff --git a/packages/radix-vue/src/shared/useGraceArea.ts b/packages/radix-vue/src/shared/useGraceArea.ts
index af4b92c4e..f07d32869 100644
--- a/packages/radix-vue/src/shared/useGraceArea.ts
+++ b/packages/radix-vue/src/shared/useGraceArea.ts
@@ -1,9 +1,10 @@
 import { type Ref, ref, watchEffect } from 'vue'
 import type { Side } from '@/Popper/utils'
 import { createEventHook, refAutoReset } from '@vueuse/shared'
+import { useEventListener } from '@vueuse/core'
 
 export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, containerElement: Ref<HTMLElement | undefined>) {
-// Reset the inTransit state if idle/scrolled.
+  // Reset the inTransit state if idle/scrolled.
   const isPointerInTransit = refAutoReset(false, 300)
 
   const pointerGraceArea = ref<Polygon | null>(null)
@@ -25,22 +26,22 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
     isPointerInTransit.value = true
   }
 
-  watchEffect((cleanupFn) => {
+  watchEffect((onCleanup) => {
     if (triggerElement.value && containerElement.value) {
       const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, containerElement.value!)
       const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, triggerElement.value!)
 
-      triggerElement.value.addEventListener('pointerleave', handleTriggerLeave)
-      containerElement.value.addEventListener('pointerleave', handleContentLeave)
+      const triggerElementPointerLeaveCleanup = useEventListener(triggerElement, 'pointerleave', handleTriggerLeave)
+      const triggerElementPointerLeaveContentCleanup = useEventListener(containerElement, 'pointerleave', handleContentLeave)
 
-      cleanupFn(() => {
-        triggerElement.value?.removeEventListener('pointerleave', handleTriggerLeave)
-        containerElement.value?.removeEventListener('pointerleave', handleContentLeave)
+      onCleanup(() => {
+        triggerElementPointerLeaveCleanup()
+        triggerElementPointerLeaveContentCleanup()
       })
     }
   })
 
-  watchEffect((cleanupFn) => {
+  watchEffect((onCleanup) => {
     if (pointerGraceArea.value) {
       const handleTrackPointerGrace = (event: PointerEvent) => {
         if (!pointerGraceArea.value)
@@ -59,9 +60,12 @@ export function useGraceArea(triggerElement: Ref<HTMLElement | undefined>, conta
           pointerExit.trigger()
         }
       }
-      triggerElement.value?.ownerDocument.addEventListener('pointermove', handleTrackPointerGrace)
 
-      cleanupFn(() => triggerElement.value?.ownerDocument.removeEventListener('pointermove', handleTrackPointerGrace))
+      const documentPointermoveCleanup = useEventListener(triggerElement.value?.ownerDocument, 'pointermove', handleTrackPointerGrace)
+
+      onCleanup(() => {
+        documentPointermoveCleanup()
+      })
     }
   })
 
@@ -211,11 +215,9 @@ function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P>
     && lowerHull.length === 1
     && upperHull[0].x === lowerHull[0].x
     && upperHull[0].y === lowerHull[0].y
-  ) {
+  )
     return upperHull
-  }
 
-  else {
+  else
     return upperHull.concat(lowerHull)
-  }
 }