diff --git a/src/hooks/use-handler.ts b/src/hooks/use-handler.ts
index 8fb12d6cc..cd0a920b9 100644
--- a/src/hooks/use-handler.ts
+++ b/src/hooks/use-handler.ts
@@ -1,28 +1,44 @@
-import { on, off } from '../utils';
-import { onMounted, onActivated, onUnmounted, onDeactivated } from 'vue';
+import { on, off } from '../utils/dom/event';
+import {
+  Ref,
+  watch,
+  onMounted,
+  onActivated,
+  onUnmounted,
+  onDeactivated
+} from 'vue';
 
 export function useHandler(
   target: HTMLElement | Document | Window,
   event: string,
   handler: any,
-  passive = false
+  passive = false,
+  ref?: Ref<boolean>
 ) {
-  let added: boolean;
+  let binded: boolean;
 
   function add() {
-    if (!added) {
-      on(target, event, handler, passive);
-      added = true;
+    if (binded || (ref && !ref.value)) {
+      return;
     }
+
+    on(target, event, handler, passive);
+    binded = true;
   }
 
   function remove() {
-    if (added) {
+    if (binded) {
       off(target, event, handler);
-      added = false;
+      binded = false;
     }
   }
 
+  if (ref) {
+    watch(() => {
+      ref.value ? add() : remove();
+    });
+  }
+
   onMounted(add);
   onActivated(add);
   onUnmounted(remove);