diff --git a/packages/components/dismissable-layer/src/DismissableLayer.ts b/packages/components/dismissable-layer/src/DismissableLayer.ts
index 3d5352717..2cd85bf64 100644
--- a/packages/components/dismissable-layer/src/DismissableLayer.ts
+++ b/packages/components/dismissable-layer/src/DismissableLayer.ts
@@ -13,8 +13,8 @@ import {
   h,
   mergeProps,
   nextTick,
+  onBeforeUnmount,
   onMounted,
-  onUnmounted,
   reactive,
   ref,
   toRefs,
@@ -269,7 +269,7 @@ const DismissableLayer = defineComponent({
       document.addEventListener(INJECT_UPDATE, handleUpdate)
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       document.removeEventListener(INJECT_UPDATE, handleUpdate)
     })
     const originalReturn = () =>
diff --git a/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue b/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
index 7b9fdce11..036392645 100644
--- a/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
+++ b/packages/components/dismissable-layer/src/stories/DismissableLayerDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OkuDismissableLayer } from '@oku-ui/dismissable-layer'
-import { createApp, onUnmounted, ref } from 'vue'
+import { createApp, onBeforeUnmount, ref } from 'vue'
 import { OkuFocusScope } from '@oku-ui/focus-scope'
 import DummyDialog from './DummyDialog.vue'
 import DummyPopover from './DummyPopover.vue'
@@ -94,7 +94,7 @@ function handlePopupClick() {
   const app = createApp(DismissableBox)
   app.mount(containerNode)
 
-  onUnmounted(() => containerNode.remove())
+  onBeforeUnmount(() => containerNode.remove())
 }
 </script>
 
diff --git a/packages/components/popover/src/popoverContentModal.ts b/packages/components/popover/src/popoverContentModal.ts
index d767709cf..8b73fb328 100644
--- a/packages/components/popover/src/popoverContentModal.ts
+++ b/packages/components/popover/src/popoverContentModal.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, mergeProps, onUnmounted, ref } from 'vue'
+import { defineComponent, h, mergeProps, onBeforeUnmount, ref } from 'vue'
 import { primitiveProps, propsOmit } from '@oku-ui/primitive'
 import { useComposedRefs, useForwardRef, useScrollLock } from '@oku-ui/use-composable'
 import { hideOthers } from 'aria-hidden'
@@ -47,10 +47,10 @@ const popoverContentModal = defineComponent({
 
     const isRightClickOutsideRef = ref(false)
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       const content = contentRef.value
       if (content)
-        return hideOthers(content)
+        hideOthers(content)
     })
 
     useScrollLock(contentRef, true)
diff --git a/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue b/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
index 8cca29f79..b35276e83 100644
--- a/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
+++ b/packages/components/popper/src/stories/WithUpdatePositionStrategyAlways.vue
@@ -6,7 +6,7 @@ import {
   OkuPopperContent,
 } from '@oku-ui/popper'
 import { OkuPortal } from '@oku-ui/portal'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import Scrollable from './Scrollable.vue'
 
 // const [left, setLeft] = React.useState(0);
@@ -27,7 +27,7 @@ onMounted(() => {
   }, 500)
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   if (intervalId)
     clearInterval(intervalId)
 })
diff --git a/packages/components/presence/src/usePresence.ts b/packages/components/presence/src/usePresence.ts
index 9df15fd24..5c4fd0243 100644
--- a/packages/components/presence/src/usePresence.ts
+++ b/packages/components/presence/src/usePresence.ts
@@ -1,4 +1,4 @@
-import { type Ref, computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { type Ref, computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useStateMachine } from './useStateMachine'
 
 function getAnimationName(styles?: CSSStyleDeclaration) {
@@ -117,7 +117,7 @@ export function usePresence(present: Ref<boolean>) {
     immediate: true,
   })
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     elWatch()
     presentWatch()
   })
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index f2451e203..e47bb2f8b 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -1,5 +1,5 @@
 import type { PropType, Ref } from 'vue'
-import { computed, defineComponent, h, onUnmounted, ref, toRefs, useModel } from 'vue'
+import { computed, defineComponent, h, onBeforeUnmount, ref, toRefs, useModel } from 'vue'
 import { primitiveProps } from '@oku-ui/primitive'
 import { useControllable, useId } from '@oku-ui/use-composable'
 import { OkuPopper } from '@oku-ui/popper'
@@ -156,7 +156,7 @@ const tooltip = defineComponent({
       }, delayDuration.value)
     }
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       window.clearTimeout(openTimerRef.value)
     })
 
diff --git a/packages/components/tooltip/src/tooltipProvider.ts b/packages/components/tooltip/src/tooltipProvider.ts
index ebcfaefb5..6df98db93 100644
--- a/packages/components/tooltip/src/tooltipProvider.ts
+++ b/packages/components/tooltip/src/tooltipProvider.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import { defineComponent, onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
 import { DEFAULT_DELAY_DURATION, createTooltipProvide } from './utils'
 import { scopeTooltipProps } from './types'
 
@@ -79,7 +79,7 @@ const tooltipProvider = defineComponent({
       skipDelayTimer.value = skipDelayTimerRef.value
     })
 
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       window.clearTimeout(skipDelayTimer.value)
     })
 
diff --git a/packages/core/use-composable/src/useSize.ts b/packages/core/use-composable/src/useSize.ts
index 8ad60f1cd..bfec056b5 100644
--- a/packages/core/use-composable/src/useSize.ts
+++ b/packages/core/use-composable/src/useSize.ts
@@ -1,7 +1,7 @@
 /// <reference types="resize-observer-browser" />
 
 import type { Ref } from 'vue'
-import { onUnmounted, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 
 interface Size {
   width: number
@@ -53,7 +53,7 @@ function useSize(element: Ref<HTMLElement | null>) {
     }
   })
 
-  onUnmounted(() => {
+  onBeforeUnmount(() => {
     if (element.value)
       resizeObserver.value?.unobserve(element.value)
   })