diff --git a/src/useClickAway/__demo__/index.tsx b/src/useClickAway/__demo__/index.tsx
index 9a90288..1deb128 100644
--- a/src/useClickAway/__demo__/index.tsx
+++ b/src/useClickAway/__demo__/index.tsx
@@ -1,20 +1,20 @@
-import { Component, ref, defineComponent } from 'vue';
-import useClickAway from '../index';
-export default defineComponent({
-  setup() {
-    const count = ref(0);
-    const eleRef = ref(null);
-    useClickAway(eleRef, () => {
-      count.value++;
-    });
-    return { eleRef, count };
-  },
-  render(_ctx) {
-    return (
-      <div>
-        <button ref="eleRef">click away</button>
-        <div>count:{_ctx.count}</div>
-      </div>
-    );
-  },
-}) as Component;
+import { Component, ref, defineComponent } from 'vue';
+import useClickAway from '../index';
+export default defineComponent({
+  setup() {
+    const count = ref(0);
+    const eleRef = ref(null);
+    useClickAway(eleRef, () => {
+      count.value++;
+    });
+    return { eleRef, count };
+  },
+  render(_ctx) {
+    return (
+      <div>
+        <button ref="eleRef">click away</button>
+        <div>count:{_ctx.count}</div>
+      </div>
+    );
+  },
+}) as Component;
diff --git a/src/useClickAway/__test__/index.spec.tsx b/src/useClickAway/__test__/index.spec.tsx
index 10dfed7..5f833e2 100644
--- a/src/useClickAway/__test__/index.spec.tsx
+++ b/src/useClickAway/__test__/index.spec.tsx
@@ -1,36 +1,36 @@
-import { mount } from '@vue/test-utils';
-
-import useClickAway from '../index';
-import { ref } from 'vue';
-
-describe('useClickAway', () => {
-  test('should work with custom funtion', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const fn = jest.fn(() => {});
-    const eleRef = ref(null);
-    const wrapRef = ref(null);
-    let removeListener!: () => void;
-    const wrapper = mount({
-      setup() {
-        removeListener = useClickAway(eleRef, fn, 'click', wrapRef);
-        return { eleRef, wrapRef };
-      },
-      render() {
-        return (
-          <div ref="wrapRef">
-            <h1 ref="eleRef"></h1>
-            <h2>h2</h2>
-          </div>
-        );
-      },
-    });
-    await wrapper.vm.$nextTick();
-    wrapper.find('h1').trigger('click');
-    expect(fn).toHaveBeenCalledTimes(0);
-    wrapper.find('h2').trigger('click');
-    expect(fn).toHaveBeenCalledTimes(1);
-    removeListener();
-    wrapper.find('h2').trigger('click');
-    expect(fn).toHaveBeenCalledTimes(1);
-  });
-});
+import { mount } from '@vue/test-utils';
+
+import useClickAway from '../index';
+import { ref } from 'vue';
+
+describe('useClickAway', () => {
+  test('should work with custom funtion', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const fn = jest.fn(() => {});
+    const eleRef = ref(null);
+    const wrapRef = ref(null);
+    let removeListener!: () => void;
+    const wrapper = mount({
+      setup() {
+        removeListener = useClickAway(eleRef, fn, 'click', wrapRef);
+        return { eleRef, wrapRef };
+      },
+      render() {
+        return (
+          <div ref="wrapRef">
+            <h1 ref="eleRef"></h1>
+            <h2>h2</h2>
+          </div>
+        );
+      },
+    });
+    await wrapper.vm.$nextTick();
+    wrapper.find('h1').trigger('click');
+    expect(fn).toHaveBeenCalledTimes(0);
+    wrapper.find('h2').trigger('click');
+    expect(fn).toHaveBeenCalledTimes(1);
+    removeListener();
+    wrapper.find('h2').trigger('click');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/useDraggable/__demo__/index.tsx b/src/useDraggable/__demo__/index.tsx
index dc9c505..55b2bfe 100644
--- a/src/useDraggable/__demo__/index.tsx
+++ b/src/useDraggable/__demo__/index.tsx
@@ -1,18 +1,18 @@
-import { Component, defineComponent } from 'vue';
-import useDraggable from '../index';
-export default defineComponent({
-  setup() {
-    const [targetRef, handleRef, { delta }] = useDraggable({ controlStyle: true });
-    return () => {
-      return (
-        <>
-          <div style="height:100px;width:100px;background: #999;" ref={targetRef}>
-            <button ref={handleRef}>handle</button>
-          </div>
-          <h2>{delta.value.x}</h2>
-          <h2>{delta.value.y}</h2>
-        </>
-      );
-    };
-  },
-}) as Component;
+import { Component, defineComponent } from 'vue';
+import useDraggable from '../index';
+export default defineComponent({
+  setup() {
+    const [targetRef, handleRef, { delta }] = useDraggable({ controlStyle: true });
+    return () => {
+      return (
+        <>
+          <div style="height:100px;width:100px;background: #999;" ref={targetRef}>
+            <button ref={handleRef}>handle</button>
+          </div>
+          <h2>{delta.value.x}</h2>
+          <h2>{delta.value.y}</h2>
+        </>
+      );
+    };
+  },
+}) as Component;
diff --git a/src/useDraggable/__test__/index.spec.tsx b/src/useDraggable/__test__/index.spec.tsx
index b42588c..c3bd794 100644
--- a/src/useDraggable/__test__/index.spec.tsx
+++ b/src/useDraggable/__test__/index.spec.tsx
@@ -1,490 +1,490 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { mount } from '@vue/test-utils';
-
-import useDraggable from '../index';
-import { defineComponent, CSSProperties } from 'vue';
-
-describe('drag', () => {
-  let utils!: ReturnType<typeof setup>;
-  beforeEach(() => {
-    utils = setup();
-  });
-
-  describe('starting drag', async () => {
-    it('should supply proper props to target', async () => {
-      const { wrapper } = await utils;
-      wrapper.find('#handle').trigger('mousedown');
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('[aria-grabbed]')).toBeTruthy;
-    });
-
-    it('should return a delta position', async () => {
-      const startAt = { clientX: 10, clientY: 10 };
-      const delta = { x: 5, y: 5 };
-      const { drag, wrapper } = await utils;
-      await drag({ start: startAt, delta });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('#output').text()).toEqual(`${delta.x}, ${delta.y}`);
-    });
-    it('should return a correct delta position after more drag', async () => {
-      const startAt = { clientX: 10, clientY: 10 };
-      const delta = { x: 5, y: 5 };
-      const secondStart = {
-        clientX: startAt.clientX + delta.x,
-        clientY: startAt.clientY + delta.y,
-      };
-      const { drag, wrapper } = await utils;
-      await drag({ start: startAt, delta });
-      await drag({
-        start: secondStart,
-        delta,
-      });
-      await wrapper.vm.$nextTick();
-      expect(wrapper.find('#output').text()).toEqual(`${2 * delta.x}, ${2 * delta.y}`);
-    });
-  });
-});
-
-describe('decorate with styles', async () => {
-  let utils!: ReturnType<typeof setup>;
-  beforeEach(() => {
-    utils = setup({ useDraggableOption: { controlStyle: true } });
-  });
-
-  it("should change target's style when dragging", async () => {
-    const { wrapper, drag } = await utils;
-
-    await drag({
-      start: { clientX: 3, clientY: 3 },
-      delta: { x: 10, y: 15 },
-    });
-
-    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
-      `translate(10px, 15px)`,
-    );
-  });
-
-  it("should change target's style when dragging (touches)", async () => {
-    const { wrapper, drag } = await utils;
-
-    await drag({
-      start: { clientX: 3, clientY: 3 },
-      delta: { x: 10, y: 15 },
-      touch: true,
-    });
-    await wrapper.vm.$nextTick();
-    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
-      `translate(10px, 15px)`,
-    );
-  });
-
-  it('should set proper cursor', async () => {
-    const { wrapper } = await utils;
-    await wrapper.vm.$nextTick();
-    expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grab');
-  });
-
-  it('should change cursor while dragging', async () => {
-    const { wrapper } = await utils;
-    wrapper.find('#handle').trigger('mousedown');
-    await wrapper.vm.$nextTick();
-    expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grabbing');
-  });
-
-  it('should add `will-change: transform` to target', async () => {
-    const { wrapper } = await utils;
-    wrapper.find('#handle').trigger('mousedown');
-    expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('transform');
-  });
-
-  it('should remove `will-change: transform` from target', async () => {
-    const { wrapper, drag } = await utils;
-    await drag({
-      start: { clientX: 3, clientY: 3 },
-      delta: { x: 10, y: 15 },
-    });
-    expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('');
-  });
-});
-
-describe('ending drag', () => {
-  let utils!: ReturnType<typeof setup>;
-  beforeEach(() => {
-    utils = setup({ useDraggableOption: { controlStyle: true }, style: {} });
-  });
-  it('should supply proper props to target', async () => {
-    const { drag, wrapper } = await utils;
-
-    await drag();
-
-    expect(wrapper.find('[aria-grabbed]')).toBeNull;
-  });
-});
-
-describe('limit in viewport', async () => {
-  let utils!: ReturnType<typeof setup>;
-  beforeEach(() => {
-    utils = setup({
-      useDraggableOption: {
-        controlStyle: true,
-        viewport: true,
-      },
-      style: {
-        ...defaultStyle,
-        width: '180px',
-        left: 'auto',
-        right: '0',
-      },
-    });
-  });
-
-  it('should not change transition beyond given rect', async () => {
-    const { drag, wrapper } = await utils;
-    const targetElement = wrapper.find('#main').element as HTMLElement;
-    const rect = targetElement.getBoundingClientRect();
-    const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
-    const delta = { x: 5, y: 5 };
-
-    await drag({ start: startAt, delta });
-    await wrapper.vm.$nextTick();
-    expect(targetElement.style.transform).toContain(`translate(5px, 5px)`);
-  });
-
-  it('should leave transition as it was before limit', async () => {
-    const { wrapper, beginDrag, move } = await utils;
-    const targetElement = wrapper.find('#main').element as HTMLElement;
-
-    const startAt = { clientX: 0 + 5, clientY: 0 + 5 };
-    const delta = { x: 5, y: 1 };
-
-    await beginDrag(startAt);
-    await move({
-      clientX: startAt.clientX + delta.x,
-      clientY: startAt.clientY + delta.y,
-    });
-    await move({
-      clientX: startAt.clientX + delta.x + 10,
-      clientY: startAt.clientY + delta.y,
-    });
-    await move({
-      clientX: startAt.clientX + delta.x + 25,
-      clientY: startAt.clientY + delta.y,
-    });
-    await move({
-      clientX: startAt.clientX + delta.x + 50,
-      clientY: startAt.clientY + delta.y,
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(targetElement.style.transform).toContain(`translate(55px, 1px)`);
-  });
-
-  it('should keep limits when dragging more than once', async () => {
-    const { drag, wrapper } = await utils;
-    const targetElement = wrapper.find('#main').element as HTMLElement;
-    targetElement.style.right = '50px';
-    const startAt = { clientX: 5, clientY: 5 };
-    const delta = { x: 15, y: 1 };
-
-    await drag({ start: startAt, delta });
-    await drag({
-      start: {
-        clientX: startAt.clientX + delta.x,
-        clientY: startAt.clientY + delta.y,
-      },
-      delta: { x: 50, y: 0 },
-    });
-
-    await wrapper.vm.$nextTick();
-    expect(targetElement.style.transform).toContain(`translate(65px, 1px)`);
-  });
-});
-
-// describe('limit in rect', async () => {
-//     const limits = {
-//         left: 11,
-//         right: window.innerWidth - 11,
-//         top: 5,
-//         bottom: window.innerHeight - 13
-//     };
-
-//     let utils!: ReturnType<typeof setup>
-//     beforeEach(() => {
-//         utils = setup({
-//             useDraggableOption: {
-//                 controlStyle: true,
-//                 rectLimits: limits,
-//             },
-//             style: {
-//                 ...defaultStyle,
-//                 width: '180px',
-//                 left: '20px'
-//             }
-//         });
-//     });
-
-//     it('should not change transition beyond given rect', async () => {
-//         const { drag, wrapper } = await utils;
-//         const targetElement = wrapper.find('#main').element as HTMLElement;
-//         const rect = targetElement.getBoundingClientRect();
-//         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
-//         const delta = { x: -50, y: -90 };
-
-//         await drag({ start: startAt, delta });
-//         await wrapper.vm.$nextTick()
-//         expect(targetElement.style.transform).toContain({
-//             left: limits.left,
-//             top: limits.top
-//         });
-//     });
-
-//     it('should keep limits when dragging more than once', async () => {
-//         const { drag, wrapper } = await utils;
-//         const targetElement = wrapper.find('#main').element as HTMLElement;
-//         targetElement.style.right = '50px';
-//         targetElement.style.left = 'auto';
-//         const rect = targetElement.getBoundingClientRect();
-
-//         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
-//         const delta = { x: 15, y: 1 };
-
-//         drag({ start: startAt, delta });
-//         drag({
-//             start: {
-//                 clientX: startAt.clientX + delta.x,
-//                 clientY: startAt.clientY + delta.y
-//             },
-//             delta: { x: 50, y: 0 }
-//         });
-
-//         const { left, width } = targetElement.getBoundingClientRect();
-//         expect(left).toEqual(limits.right - width);
-//     });
-// });
-
-describe('reset drags', () => {
-  let utils!: ReturnType<typeof setup>;
-  beforeEach(() => {
-    utils = setup({ useDraggableOption: { controlStyle: true } });
-  });
-
-  it('should start dragging from the original position', async () => {
-    const { wrapper, drag } = await utils;
-    await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
-    wrapper.find('#reset').trigger('click');
-    await wrapper.vm.$nextTick();
-    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
-      'translate(0px, 0px)',
-    );
-  });
-
-  describe('after reset', () => {
-    it('should start dragging from the original position', async () => {
-      const { wrapper, drag } = await utils;
-      await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
-      wrapper.find('#reset').trigger('click');
-      await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
-      expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
-        'translate(15px, 20px)',
-      );
-    });
-  });
-});
-
-describe('useDraggable', () => {
-  test('starting drag', async () => {
-    const [targetRef] = useDraggable({ controlStyle: true });
-    mount({
-      setup() {
-        targetRef;
-        return { targetRef };
-      },
-      render() {
-        return (
-          <>
-            <h1
-              ref={(ele: HTMLElement) => {
-                targetRef.value = ele;
-              }}
-            >
-              {' '}
-              click{' '}
-            </h1>
-          </>
-        );
-      },
-    });
-  });
-});
-const Consumer = defineComponent({
-  props: ['useDraggableOption', 'style'],
-  setup(props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style: CSSProperties }) {
-    const [targetRef, handleRef, { getTargetProps, resetState, delta, dragging }] = useDraggable(
-      props.useDraggableOption,
-    );
-    return () => (
-      <div
-        class="container"
-        ref={targetRef}
-        id="main"
-        style={props.style || defaultStyle}
-        {...getTargetProps()}
-      >
-        {dragging && <span>Dragging to:</span>}
-        <output id="output">
-          {delta.value.x}, {delta.value.y}
-        </output>
-        <button id="handle" class="handle" ref={handleRef}>
-          handle
-        </button>
-        <button id="reset" onClick={resetState}>
-          reset
-        </button>
-      </div>
-    );
-  },
-});
-
-const defaultStyle = { position: 'fixed', top: '11px', left: '11px' } as CSSProperties;
-async function setup(
-  props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style?: CSSProperties } = {
-    style: {},
-    useDraggableOption: {},
-  },
-) {
-  const wrapper = mount(
-    <Consumer useDraggableOption={props.useDraggableOption} style={props.style} />,
-  );
-  async function drag({
-    start = { clientX: 0, clientY: 0 },
-    delta = { x: 0, y: 0 },
-    touch = false,
-  } = {}) {
-    beginDrag(start, touch);
-    await wrapper.vm.$nextTick();
-    move(
-      {
-        clientX: start.clientX + delta.x,
-        clientY: start.clientY + delta.y,
-      },
-      touch,
-    );
-    await wrapper.vm.$nextTick();
-    endDrag(
-      {
-        clientX: start.clientX + delta.x,
-        clientY: start.clientY + delta.y,
-      },
-      touch,
-    );
-  }
-
-  async function beginDrag(start, touch = false) {
-    const target = wrapper.find('#handle');
-    if (touch) {
-      const ev = new TouchEvent('touchstart', {
-        bubbles: true,
-        cancelable: true,
-        touches: [createTouch({ target, ...start })],
-      });
-      target.element.dispatchEvent(ev);
-    } else {
-      target.trigger('mousedown', start);
-    }
-  }
-
-  async function move(to, touch = false) {
-    const target = wrapper.find('#handle');
-    if (touch) {
-      const ev = new TouchEvent('touchmove', {
-        bubbles: true,
-        cancelable: true,
-        touches: [
-          createTouch({
-            target,
-            ...to,
-          }),
-        ],
-      });
-      document.dispatchEvent(ev);
-    } else {
-      const ev = new MouseEvent('mousemove', {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        ...to,
-      });
-      document.dispatchEvent(ev);
-    }
-  }
-
-  async function endDrag(end, touch = false) {
-    const target = wrapper.find('#handle');
-    if (touch) {
-      const ev = new TouchEvent('touchend', {
-        bubbles: true,
-        cancelable: true,
-        touches: [
-          createTouch({
-            target,
-            ...end,
-          }),
-        ],
-      });
-      document.dispatchEvent(ev);
-    } else {
-      const ev = new MouseEvent('mouseup', {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        ...end,
-      });
-      document.dispatchEvent(ev);
-    }
-  }
-
-  return {
-    wrapper,
-    beginDrag,
-    move,
-    drag,
-  };
-}
-
-class Touch {
-  constructor(touchInit: any) {
-    this.altitudeAngle = touchInit.altitudeAngle;
-    this.azimuthAngle = touchInit.azimuthAngle;
-    this.clientX = touchInit.clientX;
-    this.clientY = touchInit.clientY;
-    this.force = touchInit.force;
-    this.identifier = touchInit.identifier;
-    this.pageX = touchInit.pageX;
-    this.pageY = touchInit.pageY;
-    this.radiusX = touchInit.radiusX;
-    this.radiusY = touchInit.radiusY;
-    this.rotationAngle = touchInit.rotationAngle;
-    this.screenX = touchInit.screenX;
-    this.screenY = touchInit.screenY;
-    this.target = touchInit.target;
-    this.touchType = touchInit.touchType;
-  }
-  readonly altitudeAngle: number;
-  readonly azimuthAngle: number;
-  readonly clientX: number;
-  readonly clientY: number;
-  readonly force: number;
-  readonly identifier: number;
-  readonly pageX: number;
-  readonly pageY: number;
-  readonly radiusX: number;
-  readonly radiusY: number;
-  readonly rotationAngle: number;
-  readonly screenX: number;
-  readonly screenY: number;
-  readonly target: EventTarget;
-  readonly touchType: TouchType;
-}
-function createTouch({ target, ...rest }) {
-  return new Touch({ identifier: Date.now(), target, ...rest });
-}
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { mount } from '@vue/test-utils';
+
+import useDraggable from '../index';
+import { defineComponent, CSSProperties } from 'vue';
+
+describe('drag', () => {
+  let utils!: ReturnType<typeof setup>;
+  beforeEach(() => {
+    utils = setup();
+  });
+
+  describe('starting drag', async () => {
+    it('should supply proper props to target', async () => {
+      const { wrapper } = await utils;
+      wrapper.find('#handle').trigger('mousedown');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('[aria-grabbed]')).toBeTruthy;
+    });
+
+    it('should return a delta position', async () => {
+      const startAt = { clientX: 10, clientY: 10 };
+      const delta = { x: 5, y: 5 };
+      const { drag, wrapper } = await utils;
+      await drag({ start: startAt, delta });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('#output').text()).toEqual(`${delta.x}, ${delta.y}`);
+    });
+    it('should return a correct delta position after more drag', async () => {
+      const startAt = { clientX: 10, clientY: 10 };
+      const delta = { x: 5, y: 5 };
+      const secondStart = {
+        clientX: startAt.clientX + delta.x,
+        clientY: startAt.clientY + delta.y,
+      };
+      const { drag, wrapper } = await utils;
+      await drag({ start: startAt, delta });
+      await drag({
+        start: secondStart,
+        delta,
+      });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('#output').text()).toEqual(`${2 * delta.x}, ${2 * delta.y}`);
+    });
+  });
+});
+
+describe('decorate with styles', async () => {
+  let utils!: ReturnType<typeof setup>;
+  beforeEach(() => {
+    utils = setup({ useDraggableOption: { controlStyle: true } });
+  });
+
+  it("should change target's style when dragging", async () => {
+    const { wrapper, drag } = await utils;
+
+    await drag({
+      start: { clientX: 3, clientY: 3 },
+      delta: { x: 10, y: 15 },
+    });
+
+    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
+      `translate(10px, 15px)`,
+    );
+  });
+
+  it("should change target's style when dragging (touches)", async () => {
+    const { wrapper, drag } = await utils;
+
+    await drag({
+      start: { clientX: 3, clientY: 3 },
+      delta: { x: 10, y: 15 },
+      touch: true,
+    });
+    await wrapper.vm.$nextTick();
+    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
+      `translate(10px, 15px)`,
+    );
+  });
+
+  it('should set proper cursor', async () => {
+    const { wrapper } = await utils;
+    await wrapper.vm.$nextTick();
+    expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grab');
+  });
+
+  it('should change cursor while dragging', async () => {
+    const { wrapper } = await utils;
+    wrapper.find('#handle').trigger('mousedown');
+    await wrapper.vm.$nextTick();
+    expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grabbing');
+  });
+
+  it('should add `will-change: transform` to target', async () => {
+    const { wrapper } = await utils;
+    wrapper.find('#handle').trigger('mousedown');
+    expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('transform');
+  });
+
+  it('should remove `will-change: transform` from target', async () => {
+    const { wrapper, drag } = await utils;
+    await drag({
+      start: { clientX: 3, clientY: 3 },
+      delta: { x: 10, y: 15 },
+    });
+    expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('');
+  });
+});
+
+describe('ending drag', () => {
+  let utils!: ReturnType<typeof setup>;
+  beforeEach(() => {
+    utils = setup({ useDraggableOption: { controlStyle: true }, style: {} });
+  });
+  it('should supply proper props to target', async () => {
+    const { drag, wrapper } = await utils;
+
+    await drag();
+
+    expect(wrapper.find('[aria-grabbed]')).toBeNull;
+  });
+});
+
+describe('limit in viewport', async () => {
+  let utils!: ReturnType<typeof setup>;
+  beforeEach(() => {
+    utils = setup({
+      useDraggableOption: {
+        controlStyle: true,
+        viewport: true,
+      },
+      style: {
+        ...defaultStyle,
+        width: '180px',
+        left: 'auto',
+        right: '0',
+      },
+    });
+  });
+
+  it('should not change transition beyond given rect', async () => {
+    const { drag, wrapper } = await utils;
+    const targetElement = wrapper.find('#main').element as HTMLElement;
+    const rect = targetElement.getBoundingClientRect();
+    const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
+    const delta = { x: 5, y: 5 };
+
+    await drag({ start: startAt, delta });
+    await wrapper.vm.$nextTick();
+    expect(targetElement.style.transform).toContain(`translate(5px, 5px)`);
+  });
+
+  it('should leave transition as it was before limit', async () => {
+    const { wrapper, beginDrag, move } = await utils;
+    const targetElement = wrapper.find('#main').element as HTMLElement;
+
+    const startAt = { clientX: 0 + 5, clientY: 0 + 5 };
+    const delta = { x: 5, y: 1 };
+
+    await beginDrag(startAt);
+    await move({
+      clientX: startAt.clientX + delta.x,
+      clientY: startAt.clientY + delta.y,
+    });
+    await move({
+      clientX: startAt.clientX + delta.x + 10,
+      clientY: startAt.clientY + delta.y,
+    });
+    await move({
+      clientX: startAt.clientX + delta.x + 25,
+      clientY: startAt.clientY + delta.y,
+    });
+    await move({
+      clientX: startAt.clientX + delta.x + 50,
+      clientY: startAt.clientY + delta.y,
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(targetElement.style.transform).toContain(`translate(55px, 1px)`);
+  });
+
+  it('should keep limits when dragging more than once', async () => {
+    const { drag, wrapper } = await utils;
+    const targetElement = wrapper.find('#main').element as HTMLElement;
+    targetElement.style.right = '50px';
+    const startAt = { clientX: 5, clientY: 5 };
+    const delta = { x: 15, y: 1 };
+
+    await drag({ start: startAt, delta });
+    await drag({
+      start: {
+        clientX: startAt.clientX + delta.x,
+        clientY: startAt.clientY + delta.y,
+      },
+      delta: { x: 50, y: 0 },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(targetElement.style.transform).toContain(`translate(65px, 1px)`);
+  });
+});
+
+// describe('limit in rect', async () => {
+//     const limits = {
+//         left: 11,
+//         right: window.innerWidth - 11,
+//         top: 5,
+//         bottom: window.innerHeight - 13
+//     };
+
+//     let utils!: ReturnType<typeof setup>
+//     beforeEach(() => {
+//         utils = setup({
+//             useDraggableOption: {
+//                 controlStyle: true,
+//                 rectLimits: limits,
+//             },
+//             style: {
+//                 ...defaultStyle,
+//                 width: '180px',
+//                 left: '20px'
+//             }
+//         });
+//     });
+
+//     it('should not change transition beyond given rect', async () => {
+//         const { drag, wrapper } = await utils;
+//         const targetElement = wrapper.find('#main').element as HTMLElement;
+//         const rect = targetElement.getBoundingClientRect();
+//         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
+//         const delta = { x: -50, y: -90 };
+
+//         await drag({ start: startAt, delta });
+//         await wrapper.vm.$nextTick()
+//         expect(targetElement.style.transform).toContain({
+//             left: limits.left,
+//             top: limits.top
+//         });
+//     });
+
+//     it('should keep limits when dragging more than once', async () => {
+//         const { drag, wrapper } = await utils;
+//         const targetElement = wrapper.find('#main').element as HTMLElement;
+//         targetElement.style.right = '50px';
+//         targetElement.style.left = 'auto';
+//         const rect = targetElement.getBoundingClientRect();
+
+//         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
+//         const delta = { x: 15, y: 1 };
+
+//         drag({ start: startAt, delta });
+//         drag({
+//             start: {
+//                 clientX: startAt.clientX + delta.x,
+//                 clientY: startAt.clientY + delta.y
+//             },
+//             delta: { x: 50, y: 0 }
+//         });
+
+//         const { left, width } = targetElement.getBoundingClientRect();
+//         expect(left).toEqual(limits.right - width);
+//     });
+// });
+
+describe('reset drags', () => {
+  let utils!: ReturnType<typeof setup>;
+  beforeEach(() => {
+    utils = setup({ useDraggableOption: { controlStyle: true } });
+  });
+
+  it('should start dragging from the original position', async () => {
+    const { wrapper, drag } = await utils;
+    await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
+    wrapper.find('#reset').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
+      'translate(0px, 0px)',
+    );
+  });
+
+  describe('after reset', () => {
+    it('should start dragging from the original position', async () => {
+      const { wrapper, drag } = await utils;
+      await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
+      wrapper.find('#reset').trigger('click');
+      await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
+      expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
+        'translate(15px, 20px)',
+      );
+    });
+  });
+});
+
+describe('useDraggable', () => {
+  test('starting drag', async () => {
+    const [targetRef] = useDraggable({ controlStyle: true });
+    mount({
+      setup() {
+        targetRef;
+        return { targetRef };
+      },
+      render() {
+        return (
+          <>
+            <h1
+              ref={(ele: HTMLElement) => {
+                targetRef.value = ele;
+              }}
+            >
+              {' '}
+              click{' '}
+            </h1>
+          </>
+        );
+      },
+    });
+  });
+});
+const Consumer = defineComponent({
+  props: ['useDraggableOption', 'style'],
+  setup(props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style: CSSProperties }) {
+    const [targetRef, handleRef, { getTargetProps, resetState, delta, dragging }] = useDraggable(
+      props.useDraggableOption,
+    );
+    return () => (
+      <div
+        class="container"
+        ref={targetRef}
+        id="main"
+        style={props.style || defaultStyle}
+        {...getTargetProps()}
+      >
+        {dragging && <span>Dragging to:</span>}
+        <output id="output">
+          {delta.value.x}, {delta.value.y}
+        </output>
+        <button id="handle" class="handle" ref={handleRef}>
+          handle
+        </button>
+        <button id="reset" onClick={resetState}>
+          reset
+        </button>
+      </div>
+    );
+  },
+});
+
+const defaultStyle = { position: 'fixed', top: '11px', left: '11px' } as CSSProperties;
+async function setup(
+  props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style?: CSSProperties } = {
+    style: {},
+    useDraggableOption: {},
+  },
+) {
+  const wrapper = mount(
+    <Consumer useDraggableOption={props.useDraggableOption} style={props.style} />,
+  );
+  async function drag({
+    start = { clientX: 0, clientY: 0 },
+    delta = { x: 0, y: 0 },
+    touch = false,
+  } = {}) {
+    beginDrag(start, touch);
+    await wrapper.vm.$nextTick();
+    move(
+      {
+        clientX: start.clientX + delta.x,
+        clientY: start.clientY + delta.y,
+      },
+      touch,
+    );
+    await wrapper.vm.$nextTick();
+    endDrag(
+      {
+        clientX: start.clientX + delta.x,
+        clientY: start.clientY + delta.y,
+      },
+      touch,
+    );
+  }
+
+  async function beginDrag(start, touch = false) {
+    const target = wrapper.find('#handle');
+    if (touch) {
+      const ev = new TouchEvent('touchstart', {
+        bubbles: true,
+        cancelable: true,
+        touches: [createTouch({ target, ...start })],
+      });
+      target.element.dispatchEvent(ev);
+    } else {
+      target.trigger('mousedown', start);
+    }
+  }
+
+  async function move(to, touch = false) {
+    const target = wrapper.find('#handle');
+    if (touch) {
+      const ev = new TouchEvent('touchmove', {
+        bubbles: true,
+        cancelable: true,
+        touches: [
+          createTouch({
+            target,
+            ...to,
+          }),
+        ],
+      });
+      document.dispatchEvent(ev);
+    } else {
+      const ev = new MouseEvent('mousemove', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+        ...to,
+      });
+      document.dispatchEvent(ev);
+    }
+  }
+
+  async function endDrag(end, touch = false) {
+    const target = wrapper.find('#handle');
+    if (touch) {
+      const ev = new TouchEvent('touchend', {
+        bubbles: true,
+        cancelable: true,
+        touches: [
+          createTouch({
+            target,
+            ...end,
+          }),
+        ],
+      });
+      document.dispatchEvent(ev);
+    } else {
+      const ev = new MouseEvent('mouseup', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+        ...end,
+      });
+      document.dispatchEvent(ev);
+    }
+  }
+
+  return {
+    wrapper,
+    beginDrag,
+    move,
+    drag,
+  };
+}
+
+class Touch {
+  constructor(touchInit: any) {
+    this.altitudeAngle = touchInit.altitudeAngle;
+    this.azimuthAngle = touchInit.azimuthAngle;
+    this.clientX = touchInit.clientX;
+    this.clientY = touchInit.clientY;
+    this.force = touchInit.force;
+    this.identifier = touchInit.identifier;
+    this.pageX = touchInit.pageX;
+    this.pageY = touchInit.pageY;
+    this.radiusX = touchInit.radiusX;
+    this.radiusY = touchInit.radiusY;
+    this.rotationAngle = touchInit.rotationAngle;
+    this.screenX = touchInit.screenX;
+    this.screenY = touchInit.screenY;
+    this.target = touchInit.target;
+    this.touchType = touchInit.touchType;
+  }
+  readonly altitudeAngle: number;
+  readonly azimuthAngle: number;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly force: number;
+  readonly identifier: number;
+  readonly pageX: number;
+  readonly pageY: number;
+  readonly radiusX: number;
+  readonly radiusY: number;
+  readonly rotationAngle: number;
+  readonly screenX: number;
+  readonly screenY: number;
+  readonly target: EventTarget;
+  readonly touchType: TouchType;
+}
+function createTouch({ target, ...rest }) {
+  return new Touch({ identifier: Date.now(), target, ...rest });
+}
diff --git a/src/useDraggable/index.ts b/src/useDraggable/index.ts
index 5755d07..053523b 100644
--- a/src/useDraggable/index.ts
+++ b/src/useDraggable/index.ts
@@ -1,197 +1,197 @@
-import { Ref, ref, watchEffect, HTMLAttributes } from 'vue';
-import { isComponentPublicInstance, ElementType } from '../utils/typeHelpers';
-
-export default function useDraggable(
-  config: {
-    target?: Ref<ElementType>;
-    handle?: Ref<ElementType>;
-    controlStyle?: boolean;
-    viewport?: boolean;
-    rectLimits?: {
-      left?: number;
-      right?: number;
-      top?: number;
-      bottom?: number;
-    };
-  } = { controlStyle: true },
-): [
-  Ref<ElementType>,
-  Ref<ElementType>,
-  {
-    getTargetProps: () => HTMLAttributes;
-    dragging: Ref<boolean>;
-    delta: Ref<{ x: number; y: number }>;
-    resetState: () => void;
-  },
-] {
-  const { target: configTarget, handle, controlStyle, viewport, rectLimits } = config;
-  const targetRef = configTarget || ref<ElementType>(null);
-  const handleRef = handle || ref<ElementType>(null);
-  const dragging = ref(null);
-  const prev = ref({ x: 0, y: 0 });
-  const delta = ref({ x: 0, y: 0 });
-  const initial = ref({ x: 0, y: 0 });
-  const limits: Ref<{
-    minX: number;
-    maxX: number;
-    minY: number;
-    maxY: number;
-  }> = ref(null);
-  const targetEleRef = ref<HTMLElement>(null);
-  const handleEleRef = ref<HTMLElement>(null);
-
-  watchEffect(
-    () => {
-      if (!targetRef.value) {
-        targetEleRef.value = null;
-      } else {
-        targetEleRef.value = isComponentPublicInstance(targetRef.value)
-          ? targetRef.value.$el
-          : targetRef.value;
-      }
-      if (!handleRef.value) {
-        handleEleRef.value = null;
-      } else {
-        handleEleRef.value = isComponentPublicInstance(handleRef.value)
-          ? handleRef.value.$el
-          : handleRef.value;
-      }
-    },
-    { flush: 'post' },
-  );
-  watchEffect(
-    () => {
-      const handle = handleEleRef.value || targetEleRef.value;
-      if (!targetEleRef.value) return;
-      handle.addEventListener('mousedown', startDragging);
-      handle.addEventListener('touchstart', startDragging);
-      return () => {
-        handle.removeEventListener('mousedown', startDragging);
-        handle.removeEventListener('touchstart', startDragging);
-      };
-
-      function startDragging(event) {
-        event.preventDefault();
-        dragging.value = true;
-        const source = (event.touches && event.touches[0]) || event;
-        const { clientX, clientY } = source;
-        initial.value = { x: clientX, y: clientY };
-        if (controlStyle) {
-          targetEleRef.value.style.willChange = 'transform';
-        }
-        if (viewport || rectLimits) {
-          const { left, top, width, height } = targetEleRef.value.getBoundingClientRect();
-
-          if (viewport) {
-            limits.value = {
-              minX: -left + delta.value.x,
-              maxX: window.innerWidth - width - left + delta.value.x,
-              minY: -top + delta.value.y,
-              maxY: window.innerHeight - height - top + delta.value.y,
-            };
-          } else {
-            limits.value = {
-              minX: rectLimits.left - left + delta.value.x,
-              maxX: rectLimits.right - width - left + delta.value.x,
-              minY: rectLimits.top - top + delta.value.y,
-              maxY: rectLimits.bottom - height - top + delta.value.y,
-            };
-          }
-        }
-      }
-    },
-    { flush: 'post' },
-  );
-
-  watchEffect(
-    () => {
-      const handle = handleEleRef.value || targetEleRef.value;
-      if (!targetEleRef.value) return;
-      const reposition = function(event) {
-        const source =
-          (event.changedTouches && event.changedTouches[0]) ||
-          (event.touches && event.touches[0]) ||
-          event;
-        const { clientX, clientY } = source;
-        const x = clientX - initial.value.x + prev.value.x;
-        const y = clientY - initial.value.y + prev.value.y;
-
-        const newDelta = calcDelta({
-          x,
-          y,
-          limits: limits.value,
-        });
-        delta.value = newDelta;
-
-        return newDelta;
-      };
-      if (dragging.value) {
-        document.addEventListener('mousemove', reposition, { passive: true });
-        document.addEventListener('touchmove', reposition, { passive: true });
-        document.addEventListener('mouseup', stopDragging);
-        document.addEventListener('touchend', stopDragging);
-      }
-
-      if (controlStyle) {
-        handle.style.cursor = dragging.value ? 'grabbing' : 'grab';
-      }
-
-      return () => {
-        if (controlStyle) {
-          handle.style.cursor = 'unset';
-        }
-        document.removeEventListener('mousemove', reposition);
-        document.removeEventListener('touchmove', reposition);
-        document.removeEventListener('mouseup', stopDragging);
-        document.removeEventListener('touchend', stopDragging);
-      };
-
-      function stopDragging(event) {
-        event.preventDefault();
-        dragging.value = false;
-        document.removeEventListener('mousemove', reposition);
-        document.removeEventListener('touchmove', reposition);
-        document.removeEventListener('mouseup', stopDragging);
-        document.removeEventListener('touchend', stopDragging);
-        const newDelta = reposition(event);
-        prev.value = newDelta;
-        if (controlStyle) {
-          targetEleRef.value.style.willChange = '';
-        }
-      }
-    },
-    { flush: 'post' },
-  );
-
-  watchEffect(
-    () => {
-      targetEleRef.value &&
-        (targetEleRef.value.style.transform = `translate(${delta.value.x}px, ${delta.value.y}px)`);
-    },
-    { flush: 'post' },
-  );
-
-  const getTargetProps = () => ({
-    'aria-grabbed': dragging.value || null,
-  });
-
-  const resetState = () => {
-    delta.value = { x: 0, y: 0 };
-    prev.value = { x: 0, y: 0 };
-  };
-
-  return [targetRef, handleRef, { getTargetProps, dragging, delta, resetState }];
-}
-
-function calcDelta({ x, y, limits }) {
-  if (!limits) {
-    return { x, y };
-  }
-
-  const { minX, maxX, minY, maxY } = limits;
-
-  return {
-    x: Math.min(Math.max(x, minX), maxX),
-    y: Math.min(Math.max(y, minY), maxY),
-  };
-}
+import { Ref, ref, watchEffect, HTMLAttributes } from 'vue';
+import { isComponentPublicInstance, ElementType } from '../utils/typeHelpers';
+
+export default function useDraggable(
+  config: {
+    target?: Ref<ElementType>;
+    handle?: Ref<ElementType>;
+    controlStyle?: boolean;
+    viewport?: boolean;
+    rectLimits?: {
+      left?: number;
+      right?: number;
+      top?: number;
+      bottom?: number;
+    };
+  } = { controlStyle: true },
+): [
+  Ref<ElementType>,
+  Ref<ElementType>,
+  {
+    getTargetProps: () => HTMLAttributes;
+    dragging: Ref<boolean>;
+    delta: Ref<{ x: number; y: number }>;
+    resetState: () => void;
+  },
+] {
+  const { target: configTarget, handle, controlStyle, viewport, rectLimits } = config;
+  const targetRef = configTarget || ref<ElementType>(null);
+  const handleRef = handle || ref<ElementType>(null);
+  const dragging = ref(null);
+  const prev = ref({ x: 0, y: 0 });
+  const delta = ref({ x: 0, y: 0 });
+  const initial = ref({ x: 0, y: 0 });
+  const limits: Ref<{
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+  }> = ref(null);
+  const targetEleRef = ref<HTMLElement>(null);
+  const handleEleRef = ref<HTMLElement>(null);
+
+  watchEffect(
+    () => {
+      if (!targetRef.value) {
+        targetEleRef.value = null;
+      } else {
+        targetEleRef.value = isComponentPublicInstance(targetRef.value)
+          ? targetRef.value.$el
+          : targetRef.value;
+      }
+      if (!handleRef.value) {
+        handleEleRef.value = null;
+      } else {
+        handleEleRef.value = isComponentPublicInstance(handleRef.value)
+          ? handleRef.value.$el
+          : handleRef.value;
+      }
+    },
+    { flush: 'post' },
+  );
+  watchEffect(
+    () => {
+      const handle = handleEleRef.value || targetEleRef.value;
+      if (!targetEleRef.value) return;
+      handle.addEventListener('mousedown', startDragging);
+      handle.addEventListener('touchstart', startDragging);
+      return () => {
+        handle.removeEventListener('mousedown', startDragging);
+        handle.removeEventListener('touchstart', startDragging);
+      };
+
+      function startDragging(event) {
+        event.preventDefault();
+        dragging.value = true;
+        const source = (event.touches && event.touches[0]) || event;
+        const { clientX, clientY } = source;
+        initial.value = { x: clientX, y: clientY };
+        if (controlStyle) {
+          targetEleRef.value.style.willChange = 'transform';
+        }
+        if (viewport || rectLimits) {
+          const { left, top, width, height } = targetEleRef.value.getBoundingClientRect();
+
+          if (viewport) {
+            limits.value = {
+              minX: -left + delta.value.x,
+              maxX: window.innerWidth - width - left + delta.value.x,
+              minY: -top + delta.value.y,
+              maxY: window.innerHeight - height - top + delta.value.y,
+            };
+          } else {
+            limits.value = {
+              minX: rectLimits.left - left + delta.value.x,
+              maxX: rectLimits.right - width - left + delta.value.x,
+              minY: rectLimits.top - top + delta.value.y,
+              maxY: rectLimits.bottom - height - top + delta.value.y,
+            };
+          }
+        }
+      }
+    },
+    { flush: 'post' },
+  );
+
+  watchEffect(
+    () => {
+      const handle = handleEleRef.value || targetEleRef.value;
+      if (!targetEleRef.value) return;
+      const reposition = function (event) {
+        const source =
+          (event.changedTouches && event.changedTouches[0]) ||
+          (event.touches && event.touches[0]) ||
+          event;
+        const { clientX, clientY } = source;
+        const x = clientX - initial.value.x + prev.value.x;
+        const y = clientY - initial.value.y + prev.value.y;
+
+        const newDelta = calcDelta({
+          x,
+          y,
+          limits: limits.value,
+        });
+        delta.value = newDelta;
+
+        return newDelta;
+      };
+      if (dragging.value) {
+        document.addEventListener('mousemove', reposition, { passive: true });
+        document.addEventListener('touchmove', reposition, { passive: true });
+        document.addEventListener('mouseup', stopDragging);
+        document.addEventListener('touchend', stopDragging);
+      }
+
+      if (controlStyle) {
+        handle.style.cursor = dragging.value ? 'grabbing' : 'grab';
+      }
+
+      return () => {
+        if (controlStyle) {
+          handle.style.cursor = 'unset';
+        }
+        document.removeEventListener('mousemove', reposition);
+        document.removeEventListener('touchmove', reposition);
+        document.removeEventListener('mouseup', stopDragging);
+        document.removeEventListener('touchend', stopDragging);
+      };
+
+      function stopDragging(event) {
+        event.preventDefault();
+        dragging.value = false;
+        document.removeEventListener('mousemove', reposition);
+        document.removeEventListener('touchmove', reposition);
+        document.removeEventListener('mouseup', stopDragging);
+        document.removeEventListener('touchend', stopDragging);
+        const newDelta = reposition(event);
+        prev.value = newDelta;
+        if (controlStyle) {
+          targetEleRef.value.style.willChange = '';
+        }
+      }
+    },
+    { flush: 'post' },
+  );
+
+  watchEffect(
+    () => {
+      targetEleRef.value &&
+        (targetEleRef.value.style.transform = `translate(${delta.value.x}px, ${delta.value.y}px)`);
+    },
+    { flush: 'post' },
+  );
+
+  const getTargetProps = () => ({
+    'aria-grabbed': dragging.value || null,
+  });
+
+  const resetState = () => {
+    delta.value = { x: 0, y: 0 };
+    prev.value = { x: 0, y: 0 };
+  };
+
+  return [targetRef, handleRef, { getTargetProps, dragging, delta, resetState }];
+}
+
+function calcDelta({ x, y, limits }) {
+  if (!limits) {
+    return { x, y };
+  }
+
+  const { minX, maxX, minY, maxY } = limits;
+
+  return {
+    x: Math.min(Math.max(x, minX), maxX),
+    y: Math.min(Math.max(y, minY), maxY),
+  };
+}
diff --git a/src/useEventListener/__demo__/index.tsx b/src/useEventListener/__demo__/index.tsx
index 0a9c474..72d3a7b 100644
--- a/src/useEventListener/__demo__/index.tsx
+++ b/src/useEventListener/__demo__/index.tsx
@@ -1,23 +1,23 @@
-import { Component, ref } from 'vue';
-import useEventListener from '../index';
-export default {
-  setup() {
-    const count = ref(0);
-    const eleRef = ref(null);
-    useEventListener(eleRef, {
-      type: 'click',
-      listener: () => {
-        count.value++;
-      },
-    });
-    return { eleRef, count };
-  },
-  render(_ctx) {
-    return (
-      <>
-        <div ref="eleRef">click me</div>
-        <div>{_ctx.count}</div>
-      </>
-    );
-  },
-} as Component;
+import { Component, ref } from 'vue';
+import useEventListener from '../index';
+export default {
+  setup() {
+    const count = ref(0);
+    const eleRef = ref(null);
+    useEventListener(eleRef, {
+      type: 'click',
+      listener: () => {
+        count.value++;
+      },
+    });
+    return { eleRef, count };
+  },
+  render(_ctx) {
+    return (
+      <>
+        <div ref="eleRef">click me</div>
+        <div>{_ctx.count}</div>
+      </>
+    );
+  },
+} as Component;
diff --git a/src/useEventListener/__test__/index.spec.tsx b/src/useEventListener/__test__/index.spec.tsx
index 58deca8..50b1189 100644
--- a/src/useEventListener/__test__/index.spec.tsx
+++ b/src/useEventListener/__test__/index.spec.tsx
@@ -1,64 +1,64 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { shallowMount } from '@vue/test-utils';
-
-import useEventListener from '../index';
-import { ref } from 'vue';
-
-describe('useEventListener', () => {
-  test('should work with Ref<HTMLElement> parameter', async () => {
-    const clickFn = jest.fn(() => {});
-    const eleRef = ref(null);
-    let removeListener!: () => void;
-    const wrapper = shallowMount({
-      setup() {
-        removeListener = useEventListener(eleRef, {
-          type: 'click',
-          listener: clickFn,
-        });
-        return { eleRef };
-      },
-      render() {
-        return (
-          <>
-            <h1 ref="eleRef">click</h1>
-          </>
-        );
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(clickFn).toHaveBeenCalledTimes(0);
-    wrapper.find('h1').trigger('click');
-    expect(clickFn).toHaveBeenCalledTimes(1);
-    removeListener();
-    wrapper.find('h1').trigger('click');
-    expect(clickFn).toHaveBeenCalledTimes(1);
-  });
-  test('should work with HTMLElement parameter', async () => {
-    const clickFn = jest.fn(() => {});
-    const eleRef = ref(null);
-    let removeListener!: () => void;
-    const wrapper = shallowMount({
-      setup() {
-        removeListener = useEventListener(eleRef, {
-          type: 'click',
-          listener: clickFn,
-        });
-        return { eleRef };
-      },
-      render() {
-        return (
-          <>
-            <h1 ref="eleRef">click</h1>
-          </>
-        );
-      },
-    });
-    await wrapper.vm.$nextTick();
-    expect(clickFn).toHaveBeenCalledTimes(0);
-    wrapper.find('h1').trigger('click');
-    expect(clickFn).toHaveBeenCalledTimes(1);
-    removeListener();
-    wrapper.find('h1').trigger('click');
-    expect(clickFn).toHaveBeenCalledTimes(1);
-  });
-});
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { shallowMount } from '@vue/test-utils';
+
+import useEventListener from '../index';
+import { ref } from 'vue';
+
+describe('useEventListener', () => {
+  test('should work with Ref<HTMLElement> parameter', async () => {
+    const clickFn = jest.fn(() => {});
+    const eleRef = ref(null);
+    let removeListener!: () => void;
+    const wrapper = shallowMount({
+      setup() {
+        removeListener = useEventListener(eleRef, {
+          type: 'click',
+          listener: clickFn,
+        });
+        return { eleRef };
+      },
+      render() {
+        return (
+          <>
+            <h1 ref="eleRef">click</h1>
+          </>
+        );
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(clickFn).toHaveBeenCalledTimes(0);
+    wrapper.find('h1').trigger('click');
+    expect(clickFn).toHaveBeenCalledTimes(1);
+    removeListener();
+    wrapper.find('h1').trigger('click');
+    expect(clickFn).toHaveBeenCalledTimes(1);
+  });
+  test('should work with HTMLElement parameter', async () => {
+    const clickFn = jest.fn(() => {});
+    const eleRef = ref(null);
+    let removeListener!: () => void;
+    const wrapper = shallowMount({
+      setup() {
+        removeListener = useEventListener(eleRef, {
+          type: 'click',
+          listener: clickFn,
+        });
+        return { eleRef };
+      },
+      render() {
+        return (
+          <>
+            <h1 ref="eleRef">click</h1>
+          </>
+        );
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(clickFn).toHaveBeenCalledTimes(0);
+    wrapper.find('h1').trigger('click');
+    expect(clickFn).toHaveBeenCalledTimes(1);
+    removeListener();
+    wrapper.find('h1').trigger('click');
+    expect(clickFn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/useForm/__demo__/index.tsx b/src/useForm/__demo__/index.tsx
index 3ddfd8c..be33f0c 100644
--- a/src/useForm/__demo__/index.tsx
+++ b/src/useForm/__demo__/index.tsx
@@ -1,122 +1,120 @@
-import { Component, reactive, toRaw } from 'vue';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Form, Input, Select } from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.min.css';
-import useForm from '../index';
-export default {
-  setup() {
-    const modelRef = reactive({
-      name1: '',
-      name2: '111',
-      obj: {
-        //嵌套数据
-        test: [],
-      },
-    });
-    const rulesRef = reactive({
-      name1: [
-        {
-          required: true,
-          message: 'Please input Activity name',
-        },
-        {
-          min: 3,
-          max: 5,
-          message: 'Length should be 3 to 5',
-          trigger: 'blur',
-        },
-      ],
-      name2: [
-        {
-          required: true,
-          message: 'Please input name2',
-        },
-      ],
-      'obj.test': [
-        {
-          required: true,
-          message: 'Please select',
-          type: 'array',
-        },
-      ],
-    });
-    const {
-      resetFields,
-      validate,
-      validateInfos,
-      mergeValidateInfo,
-      clearValidate,
-    } = useForm(modelRef, rulesRef, { debounce: { wait: 300 } });
-    const handleClick = e => {
-      e.preventDefault();
-      validate()
-        .then(() => {
-          console.log(toRaw(modelRef));
-        })
-        .catch(err => {
-          console.log('error', err);
-        });
-    };
-    const handleReset = e => {
-      e.preventDefault();
-      resetFields();
-    };
-    const clearValidateAll = () => {
-      clearValidate();
-    };
-    const clearValidateName1 = name => {
-      clearValidate(name);
-    };
-    const handleResetWithValues = e => {
-      e.preventDefault();
-      resetFields({
-        name2: 'updated values',
-      });
-    };
-    return () => (
-      <Form>
-        <Form.Item
-          label="Activity name1"
-          {...mergeValidateInfo([validateInfos.name1, validateInfos.name2])}
-        >
-          <Input v-model={[modelRef.name1, 'value']} onBlur={() => validate('name1')} />
-        </Form.Item>
-        <Form.Item label="Activity name2" {...validateInfos.name2}>
-          <Input v-model={[modelRef.name2, 'value']} />
-        </Form.Item>
-        <Form.Item label="test" {...validateInfos['obj.test']}>
-          <Select
-            v-model={[modelRef.obj.test, 'value']}
-            mode="multiple"
-            style="width: 300px"
-            onBlur={console.log}
-            onFocus={console.log}
-          >
-            <Select.Option value="china">
-              <div>
-                <span role="img" aria-label="China">
-                  🇨🇳
-                </span>
-                China (中国)
-              </div>
-            </Select.Option>
-            <Select.Option value="usa">
-              <div>
-                <span role="img" aria-label="USA">
-                  🇺🇸
-                </span>
-                USA (美国)
-              </div>
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <button onClick={handleClick}>submit</button>
-        <button onClick={handleReset}>reset</button>
-        <button onClick={handleResetWithValues}>reset with new updated Values</button>
-        <button onClick={handleReset}>reset</button>
-        <button onClick={clearValidateAll}>clearValidateAll</button>
-        <button onClick={() => clearValidateName1('name1')}>clearValidateName1</button>
-      </Form>
-    );
-  },
-} as Component;
+import { Component, reactive, toRaw } from 'vue';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Form, Input, Select } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.min.css';
+import useForm from '../index';
+export default {
+  setup() {
+    const modelRef = reactive({
+      name1: '',
+      name2: '111',
+      obj: {
+        //嵌套数据
+        test: [],
+      },
+    });
+    const rulesRef = reactive({
+      name1: [
+        {
+          required: true,
+          message: 'Please input Activity name',
+        },
+        {
+          min: 3,
+          max: 5,
+          message: 'Length should be 3 to 5',
+          trigger: 'blur',
+        },
+      ],
+      name2: [
+        {
+          required: true,
+          message: 'Please input name2',
+        },
+      ],
+      'obj.test': [
+        {
+          required: true,
+          message: 'Please select',
+          type: 'array',
+        },
+      ],
+    });
+    const { resetFields, validate, validateInfos, mergeValidateInfo, clearValidate } = useForm(
+      modelRef,
+      rulesRef,
+      { debounce: { wait: 300 } },
+    );
+    const handleClick = (e) => {
+      e.preventDefault();
+      validate()
+        .then(() => {
+          console.log(toRaw(modelRef));
+        })
+        .catch((err) => {
+          console.log('error', err);
+        });
+    };
+    const handleReset = (e) => {
+      e.preventDefault();
+      resetFields();
+    };
+    const clearValidateAll = () => {
+      clearValidate();
+    };
+    const clearValidateName1 = (name) => {
+      clearValidate(name);
+    };
+    const handleResetWithValues = (e) => {
+      e.preventDefault();
+      resetFields({
+        name2: 'updated values',
+      });
+    };
+    return () => (
+      <Form>
+        <Form.Item
+          label="Activity name1"
+          {...mergeValidateInfo([validateInfos.name1, validateInfos.name2])}
+        >
+          <Input v-model={[modelRef.name1, 'value']} onBlur={() => validate('name1')} />
+        </Form.Item>
+        <Form.Item label="Activity name2" {...validateInfos.name2}>
+          <Input v-model={[modelRef.name2, 'value']} />
+        </Form.Item>
+        <Form.Item label="test" {...validateInfos['obj.test']}>
+          <Select
+            v-model={[modelRef.obj.test, 'value']}
+            mode="multiple"
+            style="width: 300px"
+            onBlur={console.log}
+            onFocus={console.log}
+          >
+            <Select.Option value="china">
+              <div>
+                <span role="img" aria-label="China">
+                  🇨🇳
+                </span>
+                China (中国)
+              </div>
+            </Select.Option>
+            <Select.Option value="usa">
+              <div>
+                <span role="img" aria-label="USA">
+                  🇺🇸
+                </span>
+                USA (美国)
+              </div>
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <button onClick={handleClick}>submit</button>
+        <button onClick={handleReset}>reset</button>
+        <button onClick={handleResetWithValues}>reset with new updated Values</button>
+        <button onClick={handleReset}>reset</button>
+        <button onClick={clearValidateAll}>clearValidateAll</button>
+        <button onClick={() => clearValidateName1('name1')}>clearValidateName1</button>
+      </Form>
+    );
+  },
+} as Component;
diff --git a/src/useForm/index.ts b/src/useForm/index.ts
index c3da300..8c94b2b 100644
--- a/src/useForm/index.ts
+++ b/src/useForm/index.ts
@@ -168,7 +168,7 @@ function useForm(
   const initialModel = cloneDeep(modelRef);
   let validateInfos: validateInfos = {};
 
-  Object.keys(rulesRef).forEach(key => {
+  Object.keys(rulesRef).forEach((key) => {
     validateInfos[key] = {
       autoLink: false,
       required: isRequired(rulesRef[key]),
@@ -182,7 +182,7 @@ function useForm(
     });
     //modelRef = resetReactiveValue(initialModel, modelRef);
     nextTick(() => {
-      Object.keys(validateInfos).forEach(key => {
+      Object.keys(validateInfos).forEach((key) => {
         validateInfos[key] = {
           autoLink: false,
           required: isRequired(rulesRef[key]),
@@ -194,7 +194,7 @@ function useForm(
     if (!trigger.length) {
       return rules;
     } else {
-      return rules.filter(rule => {
+      return rules.filter((rule) => {
         const triggerList = toArray(rule.trigger || 'change');
         return intersection(triggerList, trigger).length;
       });
@@ -310,7 +310,7 @@ function useForm(
     } else {
       keys = [names];
     }
-    keys.forEach(key => {
+    keys.forEach((key) => {
       validateInfos[key] &&
         Object.assign(validateInfos[key], {
           validateStatus: '',
@@ -337,7 +337,7 @@ function useForm(
   let oldModel = initialModel;
   const modelFn = (model: { [x: string]: any }) => {
     const names = [];
-    Object.keys(rulesRef).forEach(key => {
+    Object.keys(rulesRef).forEach((key) => {
       const prop = getPropByPath(model, key, false);
       const oldProp = getPropByPath(oldModel, key, false);
       if (!isEqual(prop.v, oldProp.v)) {
diff --git a/src/useHover/__demo__/index.tsx b/src/useHover/__demo__/index.tsx
index b189c80..2bb1987 100644
--- a/src/useHover/__demo__/index.tsx
+++ b/src/useHover/__demo__/index.tsx
@@ -1,24 +1,24 @@
-import { ref, Component } from 'vue';
-import useHover from '../index';
-export default {
-  setup() {
-    const eleRef = ref(null);
-    const [isHover] = useHover(eleRef, {
-      onEnter: () => {
-        console.log('enter');
-      },
-    });
-    return {
-      eleRef,
-      isHover,
-    };
-  },
-  render(_ctx) {
-    return (
-      <>
-        <h1 ref="eleRef">move your mouse</h1>
-        <h2>{_ctx.isHover ? 'enter' : 'leave'}</h2>
-      </>
-    );
-  },
-} as Component;
+import { ref, Component } from 'vue';
+import useHover from '../index';
+export default {
+  setup() {
+    const eleRef = ref(null);
+    const [isHover] = useHover(eleRef, {
+      onEnter: () => {
+        console.log('enter');
+      },
+    });
+    return {
+      eleRef,
+      isHover,
+    };
+  },
+  render(_ctx) {
+    return (
+      <>
+        <h1 ref="eleRef">move your mouse</h1>
+        <h2>{_ctx.isHover ? 'enter' : 'leave'}</h2>
+      </>
+    );
+  },
+} as Component;
diff --git a/src/useHover/__tests__/index.spec.tsx b/src/useHover/__tests__/index.spec.tsx
index 97ed4de..3f926ab 100644
--- a/src/useHover/__tests__/index.spec.tsx
+++ b/src/useHover/__tests__/index.spec.tsx
@@ -1,35 +1,35 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { shallowMount } from '@vue/test-utils';
-import useHover from '../index';
-import { ref } from 'vue';
-
-describe('useHover', () => {
-  test('should work with custom event', async () => {
-    const onEnter = jest.fn(() => {});
-    const onLeave = jest.fn(() => {});
-    const wrapper = shallowMount({
-      setup() {
-        const eleRef = ref(null);
-        const [isHover] = useHover(eleRef, {
-          onEnter,
-          onLeave,
-        });
-        return {
-          eleRef,
-          isHover,
-        };
-      },
-      render() {
-        return <h1 ref="eleRef">move your mouse</h1>;
-      },
-    });
-    await wrapper.vm.$nextTick();
-    wrapper.find('h1').trigger('mouseenter');
-    expect(onEnter).toHaveBeenCalled();
-    expect(wrapper.vm.isHover).toBe(true);
-
-    wrapper.find('h1').trigger('mouseleave');
-    expect(onLeave).toHaveBeenCalled();
-    expect(wrapper.vm.isHover).toBe(false);
-  });
-});
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { shallowMount } from '@vue/test-utils';
+import useHover from '../index';
+import { ref } from 'vue';
+
+describe('useHover', () => {
+  test('should work with custom event', async () => {
+    const onEnter = jest.fn(() => {});
+    const onLeave = jest.fn(() => {});
+    const wrapper = shallowMount({
+      setup() {
+        const eleRef = ref(null);
+        const [isHover] = useHover(eleRef, {
+          onEnter,
+          onLeave,
+        });
+        return {
+          eleRef,
+          isHover,
+        };
+      },
+      render() {
+        return <h1 ref="eleRef">move your mouse</h1>;
+      },
+    });
+    await wrapper.vm.$nextTick();
+    wrapper.find('h1').trigger('mouseenter');
+    expect(onEnter).toHaveBeenCalled();
+    expect(wrapper.vm.isHover).toBe(true);
+
+    wrapper.find('h1').trigger('mouseleave');
+    expect(onLeave).toHaveBeenCalled();
+    expect(wrapper.vm.isHover).toBe(false);
+  });
+});
diff --git a/src/useHover/index.ts b/src/useHover/index.ts
index 5420dfd..5fa9919 100644
--- a/src/useHover/index.ts
+++ b/src/useHover/index.ts
@@ -1,73 +1,73 @@
-import { ref, Ref, watch } from 'vue';
-export interface Options {
-  onEnter?: (e: MouseEvent) => void;
-  onLeave?: (e: MouseEvent) => void;
-}
-
-type Action = {
-  actions: {
-    removelistener: () => void;
-  };
-};
-
-/**
- * useHover
- *
- * @param {Ref<HTMLElement>)} ele
- * @param {Options} [options]
- * @returns
- */
-function useHover(target: Ref<HTMLElement>, options?: Options): [Ref<boolean>, Action] {
-  if (!target) {
-    console.warn(
-      `fucntiuon useHover first parameter expect HTMLElement | Ref<HTMLElement>,bug got ${target}`,
-    );
-    return;
-  }
-  const isHovering = ref(null);
-  const { onEnter, onLeave } = options || {};
-  const onMouseEnter = (e: MouseEvent) => {
-    if (onEnter) {
-      onEnter(e);
-    }
-    isHovering.value = true;
-  };
-  const onMouseLeave = (e: MouseEvent) => {
-    if (onLeave) {
-      onLeave(e);
-    }
-    isHovering.value = false;
-  };
-
-  const _addListeners = (ele: HTMLElement) => {
-    if (ele) {
-      ele.addEventListener('mouseenter', onMouseEnter);
-      ele.addEventListener('mouseleave', onMouseLeave);
-    }
-  };
-  const _removeListeners = (ele: HTMLElement) => {
-    if (ele) {
-      ele.removeEventListener('mouseenter', onMouseEnter);
-      ele.removeEventListener('mouseleave', onMouseLeave);
-    }
-  };
-  const removelistener = () => {
-    _removeListeners((target as Ref<HTMLElement>).value);
-    destoryWatcher();
-  };
-  const destoryWatcher = watch(
-    target as Ref<HTMLElement>,
-    (newValue, oldValue) => {
-      if (newValue) {
-        _addListeners(newValue);
-      }
-      if (oldValue) {
-        _removeListeners(oldValue);
-      }
-    },
-    { flush: 'post' },
-  );
-  return [isHovering, { actions: { removelistener } }];
-}
-
-export default useHover;
+import { ref, Ref, watch } from 'vue';
+export interface Options {
+  onEnter?: (e: MouseEvent) => void;
+  onLeave?: (e: MouseEvent) => void;
+}
+
+type Action = {
+  actions: {
+    removelistener: () => void;
+  };
+};
+
+/**
+ * useHover
+ *
+ * @param {Ref<HTMLElement>)} ele
+ * @param {Options} [options]
+ * @returns
+ */
+function useHover(target: Ref<HTMLElement>, options?: Options): [Ref<boolean>, Action] {
+  if (!target) {
+    console.warn(
+      `fucntiuon useHover first parameter expect HTMLElement | Ref<HTMLElement>,bug got ${target}`,
+    );
+    return;
+  }
+  const isHovering = ref(null);
+  const { onEnter, onLeave } = options || {};
+  const onMouseEnter = (e: MouseEvent) => {
+    if (onEnter) {
+      onEnter(e);
+    }
+    isHovering.value = true;
+  };
+  const onMouseLeave = (e: MouseEvent) => {
+    if (onLeave) {
+      onLeave(e);
+    }
+    isHovering.value = false;
+  };
+
+  const _addListeners = (ele: HTMLElement) => {
+    if (ele) {
+      ele.addEventListener('mouseenter', onMouseEnter);
+      ele.addEventListener('mouseleave', onMouseLeave);
+    }
+  };
+  const _removeListeners = (ele: HTMLElement) => {
+    if (ele) {
+      ele.removeEventListener('mouseenter', onMouseEnter);
+      ele.removeEventListener('mouseleave', onMouseLeave);
+    }
+  };
+  const removelistener = () => {
+    _removeListeners((target as Ref<HTMLElement>).value);
+    destoryWatcher();
+  };
+  const destoryWatcher = watch(
+    target as Ref<HTMLElement>,
+    (newValue, oldValue) => {
+      if (newValue) {
+        _addListeners(newValue);
+      }
+      if (oldValue) {
+        _removeListeners(oldValue);
+      }
+    },
+    { flush: 'post' },
+  );
+  return [isHovering, { actions: { removelistener } }];
+}
+
+export default useHover;
diff --git a/src/useInViewport/__demo__/index.tsx b/src/useInViewport/__demo__/index.tsx
index 578245b..dd1124e 100644
--- a/src/useInViewport/__demo__/index.tsx
+++ b/src/useInViewport/__demo__/index.tsx
@@ -1,17 +1,17 @@
-import { Component, ref } from 'vue';
-import useInViewport from '../index';
-export default {
-  setup() {
-    const ele = ref(null);
-    const inViewPort = useInViewport(ele);
-    return { ele, inViewPort };
-  },
-  render: _ctx => (
-    <div>
-      <div ref="ele">observer dom</div>
-      <div style={{ marginTop: 70, color: _ctx.inViewPort ? '#87d068' : '#f50' }}>
-        {_ctx.inViewPort === null ? '' : _ctx.inViewPort ? 'visible' : 'hidden'}
-      </div>
-    </div>
-  ),
-} as Component;
+import { Component, ref } from 'vue';
+import useInViewport from '../index';
+export default {
+  setup() {
+    const ele = ref(null);
+    const inViewPort = useInViewport(ele);
+    return { ele, inViewPort };
+  },
+  render: (_ctx) => (
+    <div>
+      <div ref="ele">observer dom</div>
+      <div style={{ marginTop: 70, color: _ctx.inViewPort ? '#87d068' : '#f50' }}>
+        {_ctx.inViewPort === null ? '' : _ctx.inViewPort ? 'visible' : 'hidden'}
+      </div>
+    </div>
+  ),
+} as Component;
diff --git a/src/useInViewport/index.ts b/src/useInViewport/index.ts
index 5e46c87..d2b9fca 100644
--- a/src/useInViewport/index.ts
+++ b/src/useInViewport/index.ts
@@ -1,27 +1,27 @@
-import { ref, Ref, watchEffect } from 'vue';
-
-function useInViewport(target: Ref<HTMLElement>): Ref<boolean> | Ref<null> {
-  const inViewPort = ref(null);
-  let prevEl = null;
-  const observer = new IntersectionObserver(entries => {
-    for (const entry of entries) {
-      if (entry.isIntersecting) {
-        inViewPort.value = true;
-      } else {
-        inViewPort.value = false;
-      }
-    }
-  });
-  watchEffect(() => {
-    if (prevEl) {
-      observer.disconnect();
-    }
-    if (target.value) {
-      observer.observe((target as Ref<HTMLElement>).value);
-    }
-    prevEl = target.value;
-  });
-  return inViewPort;
-}
-
-export default useInViewport;
+import { ref, Ref, watchEffect } from 'vue';
+
+function useInViewport(target: Ref<HTMLElement>): Ref<boolean> | Ref<null> {
+  const inViewPort = ref(null);
+  let prevEl = null;
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        inViewPort.value = true;
+      } else {
+        inViewPort.value = false;
+      }
+    }
+  });
+  watchEffect(() => {
+    if (prevEl) {
+      observer.disconnect();
+    }
+    if (target.value) {
+      observer.observe((target as Ref<HTMLElement>).value);
+    }
+    prevEl = target.value;
+  });
+  return inViewPort;
+}
+
+export default useInViewport;
diff --git a/src/useReactiveRef/__demo__/index.tsx b/src/useReactiveRef/__demo__/index.tsx
index ec1e18a..a0c6d09 100644
--- a/src/useReactiveRef/__demo__/index.tsx
+++ b/src/useReactiveRef/__demo__/index.tsx
@@ -1,21 +1,21 @@
-import { Component, ref, Ref, watchEffect } from 'vue';
-import useReactiveRef from '../index';
-export default {
-  setup() {
-    const [eleRef, setEle] = useReactiveRef();
-    const flag = ref(true);
-    const toggle = () => {
-      flag.value = !flag.value;
-    };
-    watchEffect(() => {
-      console.log((eleRef as Ref<HTMLElement>).value?.innerHTML);
-    });
-    return () => (
-      <>
-        <button onClick={toggle}> toggle "h1"</button>
-        {flag.value ? <h1 ref={setEle}>h1</h1> : null}
-        <h2>{(eleRef as Ref<HTMLElement>).value?.innerHTML}</h2>
-      </>
-    );
-  },
-} as Component;
+import { Component, ref, Ref, watchEffect } from 'vue';
+import useReactiveRef from '../index';
+export default {
+  setup() {
+    const [eleRef, setEle] = useReactiveRef();
+    const flag = ref(true);
+    const toggle = () => {
+      flag.value = !flag.value;
+    };
+    watchEffect(() => {
+      console.log((eleRef as Ref<HTMLElement>).value?.innerHTML);
+    });
+    return () => (
+      <>
+        <button onClick={toggle}> toggle "h1"</button>
+        {flag.value ? <h1 ref={setEle}>h1</h1> : null}
+        <h2>{(eleRef as Ref<HTMLElement>).value?.innerHTML}</h2>
+      </>
+    );
+  },
+} as Component;
diff --git a/src/useReactiveRef/__test__/index.spec.tsx b/src/useReactiveRef/__test__/index.spec.tsx
index 166d47a..4c2c809 100644
--- a/src/useReactiveRef/__test__/index.spec.tsx
+++ b/src/useReactiveRef/__test__/index.spec.tsx
@@ -1,25 +1,25 @@
-import { shallowMount } from '@vue/test-utils';
-
-import useReactiveRef from '../index';
-import { ref } from 'vue';
-
-describe('useReactiveRef', () => {
-  test('should work with custom event', async () => {
-    const [eleRef, setEle] = useReactiveRef();
-    const showH1 = ref(false);
-    const wrapper = shallowMount({
-      setup() {
-        return () => (
-          <>
-            {showH1.value ? <h1 ref={setEle}></h1> : null}
-            <h1 ref="setEle"></h1>
-          </>
-        );
-      },
-    });
-    expect(eleRef.value).toEqual(null);
-    showH1.value = true;
-    await wrapper.vm.$nextTick();
-    expect(eleRef.value).toBe(wrapper.find('h1').element);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+
+import useReactiveRef from '../index';
+import { ref } from 'vue';
+
+describe('useReactiveRef', () => {
+  test('should work with custom event', async () => {
+    const [eleRef, setEle] = useReactiveRef();
+    const showH1 = ref(false);
+    const wrapper = shallowMount({
+      setup() {
+        return () => (
+          <>
+            {showH1.value ? <h1 ref={setEle}></h1> : null}
+            <h1 ref="setEle"></h1>
+          </>
+        );
+      },
+    });
+    expect(eleRef.value).toEqual(null);
+    showH1.value = true;
+    await wrapper.vm.$nextTick();
+    expect(eleRef.value).toBe(wrapper.find('h1').element);
+  });
+});
diff --git a/src/useReactiveRef/index.ts b/src/useReactiveRef/index.ts
index 784c041..6dfad02 100644
--- a/src/useReactiveRef/index.ts
+++ b/src/useReactiveRef/index.ts
@@ -1,13 +1,13 @@
-import { ref, ComponentPublicInstance, Ref } from 'vue';
-type ElementType = HTMLElement | ComponentPublicInstance;
-function useReactiveRef(): [Ref<ElementType>, (...args: any) => void] {
-  let prevEle = null as ElementType | null;
-  const eleRef = ref(prevEle);
-  function setEle(ele: HTMLElement) {
-    if (prevEle === ele) return;
-    prevEle = ele;
-    eleRef.value = prevEle;
-  }
-  return [eleRef, setEle];
-}
-export default useReactiveRef;
+import { ref, ComponentPublicInstance, Ref } from 'vue';
+type ElementType = HTMLElement | ComponentPublicInstance;
+function useReactiveRef(): [Ref<ElementType>, (...args: any) => void] {
+  let prevEle = null as ElementType | null;
+  const eleRef = ref(prevEle);
+  function setEle(ele: HTMLElement) {
+    if (prevEle === ele) return;
+    prevEle = ele;
+    eleRef.value = prevEle;
+  }
+  return [eleRef, setEle];
+}
+export default useReactiveRef;
diff --git a/src/useScroll/__demo__/index.tsx b/src/useScroll/__demo__/index.tsx
index acce038..d487ace 100644
--- a/src/useScroll/__demo__/index.tsx
+++ b/src/useScroll/__demo__/index.tsx
@@ -1,58 +1,58 @@
-import { Component, ref } from 'vue';
-import useScroll from '../index';
-export default {
-  setup() {
-    const eleRef = ref(null);
-    const scroll = useScroll(eleRef);
-    return { eleRef, scroll };
-  },
-  render(_ctx) {
-    return (
-      <>
-        <div>{JSON.stringify(_ctx.scroll)}</div>
-        <div
-          style={{
-            height: '160px',
-            width: '160px',
-            border: 'solid 1px #000',
-            overflow: 'scroll',
-            whiteSpace: 'nowrap',
-            fontSize: '32px',
-          }}
-          ref="eleRef"
-        >
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur atque, debitis ex
-            excepturi explicabo iste iure labore molestiae neque optio perspiciatis
-          </div>
-          <div>
-            Aspernatur cupiditate, deleniti id incidunt mollitia omnis! A aspernatur assumenda
-            consequuntur culpa cumque dignissimos enim eos, et fugit natus nemo nesciunt
-          </div>
-          <div>
-            Alias aut deserunt expedita, inventore maiores minima officia porro rem. Accusamus
-            ducimus magni modi mollitia nihil nisi provident
-          </div>
-          <div>
-            Alias aut autem consequuntur doloremque esse facilis id molestiae neque officia placeat,
-            quia quisquam repellendus reprehenderit.
-          </div>
-          <div>
-            Adipisci blanditiis facere nam perspiciatis sit soluta ullam! Architecto aut blanditiis,
-            consectetur corporis cum deserunt distinctio dolore eius est exercitationem
-          </div>
-          <div>Ab aliquid asperiores assumenda corporis cumque dolorum expedita</div>
-          <div>
-            Culpa cumque eveniet natus totam! Adipisci, animi at commodi delectus distinctio dolore
-            earum, eum expedita facilis
-          </div>
-          <div>
-            Quod sit, temporibus! Amet animi fugit officiis perspiciatis, quis unde. Cumque
-            dignissimos distinctio, dolor eaque est fugit nisi non pariatur porro possimus, quas
-            quasi
-          </div>
-        </div>
-      </>
-    );
-  },
-} as Component;
+import { Component, ref } from 'vue';
+import useScroll from '../index';
+export default {
+  setup() {
+    const eleRef = ref(null);
+    const scroll = useScroll(eleRef);
+    return { eleRef, scroll };
+  },
+  render(_ctx) {
+    return (
+      <>
+        <div>{JSON.stringify(_ctx.scroll)}</div>
+        <div
+          style={{
+            height: '160px',
+            width: '160px',
+            border: 'solid 1px #000',
+            overflow: 'scroll',
+            whiteSpace: 'nowrap',
+            fontSize: '32px',
+          }}
+          ref="eleRef"
+        >
+          <div>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur atque, debitis ex
+            excepturi explicabo iste iure labore molestiae neque optio perspiciatis
+          </div>
+          <div>
+            Aspernatur cupiditate, deleniti id incidunt mollitia omnis! A aspernatur assumenda
+            consequuntur culpa cumque dignissimos enim eos, et fugit natus nemo nesciunt
+          </div>
+          <div>
+            Alias aut deserunt expedita, inventore maiores minima officia porro rem. Accusamus
+            ducimus magni modi mollitia nihil nisi provident
+          </div>
+          <div>
+            Alias aut autem consequuntur doloremque esse facilis id molestiae neque officia placeat,
+            quia quisquam repellendus reprehenderit.
+          </div>
+          <div>
+            Adipisci blanditiis facere nam perspiciatis sit soluta ullam! Architecto aut blanditiis,
+            consectetur corporis cum deserunt distinctio dolore eius est exercitationem
+          </div>
+          <div>Ab aliquid asperiores assumenda corporis cumque dolorum expedita</div>
+          <div>
+            Culpa cumque eveniet natus totam! Adipisci, animi at commodi delectus distinctio dolore
+            earum, eum expedita facilis
+          </div>
+          <div>
+            Quod sit, temporibus! Amet animi fugit officiis perspiciatis, quis unde. Cumque
+            dignissimos distinctio, dolor eaque est fugit nisi non pariatur porro possimus, quas
+            quasi
+          </div>
+        </div>
+      </>
+    );
+  },
+} as Component;
diff --git a/src/useScroll/__test__/index.spec.tsx b/src/useScroll/__test__/index.spec.tsx
index ed6b95e..7e7f449 100644
--- a/src/useScroll/__test__/index.spec.tsx
+++ b/src/useScroll/__test__/index.spec.tsx
@@ -1,56 +1,56 @@
-import { mount } from '@vue/test-utils';
-import { ref } from 'vue';
-import useScroll from '../index';
-
-describe('useScroll', () => {
-  it('define', async () => {
-    const elem = document.createElement('div');
-    elem.style.height = '100px';
-    if (document.body) {
-      document.body.appendChild(elem);
-    }
-    let scroll;
-    const wrapper = mount(
-      {
-        setup() {
-          scroll = useScroll(ref(elem));
-          return {};
-        },
-        render() {
-          return <h1 style={{ height: '999px' }}></h1>;
-        },
-      },
-      {
-        attachTo: elem,
-      },
-    );
-    await wrapper.vm.$nextTick();
-    // elem did not trigger scroll
-    elem.scrollTop = 120;
-    await wrapper.vm.$nextTick();
-    expect(scroll.value.left).toBe(0);
-    expect(scroll.value.top).toBe(0);
-  });
-  // it('define2', async () => {
-  //     const el = ref(null)
-  //     const scroll = useScroll(el)
-  //     const wrapper = mount({
-  //         setup() {
-  //             return { el }
-  //         },
-  //         render() {
-  //             return (
-  //                 <div ref='el' style='height:120px;overflow: scroll;'>
-  //                     <h1 style='height:999px'>sad</h1>
-  //                 </div>
-  //             )
-  //         }
-  //     })
-  //     await wrapper.vm.$nextTick()
-  //     el.value.scrollTop = 100
-  //     // elem did not trigger scroll
-  //     await wrapper.vm.$nextTick()
-  //     expect(scroll.value.left).toBe(0);
-  //     expect(scroll.value.top).toBe(0);
-  // });
-});
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import useScroll from '../index';
+
+describe('useScroll', () => {
+  it('define', async () => {
+    const elem = document.createElement('div');
+    elem.style.height = '100px';
+    if (document.body) {
+      document.body.appendChild(elem);
+    }
+    let scroll;
+    const wrapper = mount(
+      {
+        setup() {
+          scroll = useScroll(ref(elem));
+          return {};
+        },
+        render() {
+          return <h1 style={{ height: '999px' }}></h1>;
+        },
+      },
+      {
+        attachTo: elem,
+      },
+    );
+    await wrapper.vm.$nextTick();
+    // elem did not trigger scroll
+    elem.scrollTop = 120;
+    await wrapper.vm.$nextTick();
+    expect(scroll.value.left).toBe(0);
+    expect(scroll.value.top).toBe(0);
+  });
+  // it('define2', async () => {
+  //     const el = ref(null)
+  //     const scroll = useScroll(el)
+  //     const wrapper = mount({
+  //         setup() {
+  //             return { el }
+  //         },
+  //         render() {
+  //             return (
+  //                 <div ref='el' style='height:120px;overflow: scroll;'>
+  //                     <h1 style='height:999px'>sad</h1>
+  //                 </div>
+  //             )
+  //         }
+  //     })
+  //     await wrapper.vm.$nextTick()
+  //     el.value.scrollTop = 100
+  //     // elem did not trigger scroll
+  //     await wrapper.vm.$nextTick()
+  //     expect(scroll.value.left).toBe(0);
+  //     expect(scroll.value.top).toBe(0);
+  // });
+});
diff --git a/src/useScroll/index.ts b/src/useScroll/index.ts
index b2b9d8e..e1f5bef 100644
--- a/src/useScroll/index.ts
+++ b/src/useScroll/index.ts
@@ -1,35 +1,35 @@
-import { Ref, ref } from 'vue';
-import useEventListener from '../useEventListener';
-interface Position {
-  left: number;
-  top: number;
-}
-export default function useScroll(target: Ref<HTMLElement | Document | Window>): Ref<Position> {
-  const position = ref({ left: 0, top: 0 } as Position);
-  const updatePosition = (currentTarget: HTMLElement | Document) => {
-    let newPosition;
-    if (currentTarget === document) {
-      if (!document.scrollingElement) return;
-      newPosition = {
-        left: document.scrollingElement.scrollLeft,
-        top: document.scrollingElement.scrollTop,
-      };
-    } else {
-      newPosition = {
-        left: (currentTarget as HTMLElement).scrollLeft,
-        top: (currentTarget as HTMLElement).scrollTop,
-      };
-    }
-    position.value = newPosition;
-  };
-  const listener = (event: Event) => {
-    if (!event.target) return;
-    updatePosition(event.target as HTMLElement | Document);
-  };
-  useEventListener(target as Ref<HTMLElement | Document | Window>, {
-    type: 'scroll',
-    listener,
-  });
-
-  return position;
-}
+import { Ref, ref } from 'vue';
+import useEventListener from '../useEventListener';
+interface Position {
+  left: number;
+  top: number;
+}
+export default function useScroll(target: Ref<HTMLElement | Document | Window>): Ref<Position> {
+  const position = ref({ left: 0, top: 0 } as Position);
+  const updatePosition = (currentTarget: HTMLElement | Document) => {
+    let newPosition;
+    if (currentTarget === document) {
+      if (!document.scrollingElement) return;
+      newPosition = {
+        left: document.scrollingElement.scrollLeft,
+        top: document.scrollingElement.scrollTop,
+      };
+    } else {
+      newPosition = {
+        left: (currentTarget as HTMLElement).scrollLeft,
+        top: (currentTarget as HTMLElement).scrollTop,
+      };
+    }
+    position.value = newPosition;
+  };
+  const listener = (event: Event) => {
+    if (!event.target) return;
+    updatePosition(event.target as HTMLElement | Document);
+  };
+  useEventListener(target as Ref<HTMLElement | Document | Window>, {
+    type: 'scroll',
+    listener,
+  });
+
+  return position;
+}
diff --git a/src/useSize/__demo__/index.tsx b/src/useSize/__demo__/index.tsx
index 82ec2f5..54c6a72 100644
--- a/src/useSize/__demo__/index.tsx
+++ b/src/useSize/__demo__/index.tsx
@@ -1,13 +1,13 @@
-import { Component } from 'vue';
-import useSize from '../index';
-export default {
-  setup() {
-    const [size, elRef] = useSize();
-    return () => (
-      <div ref={elRef}>
-        try to resize the preview window <br />
-        dimensions -- width: {size.width} px, height: {size.height} px
-      </div>
-    );
-  },
-} as Component;
+import { Component } from 'vue';
+import useSize from '../index';
+export default {
+  setup() {
+    const [size, elRef] = useSize();
+    return () => (
+      <div ref={elRef}>
+        try to resize the preview window <br />
+        dimensions -- width: {size.width} px, height: {size.height} px
+      </div>
+    );
+  },
+} as Component;
diff --git a/src/useSize/index.ts b/src/useSize/index.ts
index 12b155a..27d48bc 100644
--- a/src/useSize/index.ts
+++ b/src/useSize/index.ts
@@ -1,37 +1,37 @@
-import { Ref, reactive, onMounted, watch, ref } from 'vue';
-import ResizeObserver from 'resize-observer-polyfill';
-
-type Size = { width?: number; height?: number };
-
-function useSize(target?: Ref<Element | Window | null>): [Size, Ref] {
-  const elRef = target || ref(null);
-  const state = reactive({
-    width: ((elRef || {}) as HTMLElement).clientWidth,
-    height: ((elRef || {}) as HTMLElement).clientHeight,
-  });
-  onMounted(() => {
-    let resizeObserver = null;
-    watch(
-      elRef,
-      (el, preElm, onInvalidate) => {
-        if (!el) return;
-        resizeObserver && resizeObserver.disconnect();
-        resizeObserver = new ResizeObserver(entries => {
-          entries.forEach(entry => {
-            state.width = entry.target.clientWidth;
-            state.height = entry.target.clientHeight;
-          });
-        });
-        resizeObserver.observe(el as HTMLElement);
-        onInvalidate(() => {
-          resizeObserver && resizeObserver.disconnect();
-        });
-      },
-      { immediate: true },
-    );
-  });
-
-  return [state, elRef];
-}
-
-export default useSize;
+import { Ref, reactive, onMounted, watch, ref } from 'vue';
+import ResizeObserver from 'resize-observer-polyfill';
+
+type Size = { width?: number; height?: number };
+
+function useSize(target?: Ref<Element | Window | null>): [Size, Ref] {
+  const elRef = target || ref(null);
+  const state = reactive({
+    width: ((elRef || {}) as HTMLElement).clientWidth,
+    height: ((elRef || {}) as HTMLElement).clientHeight,
+  });
+  onMounted(() => {
+    let resizeObserver = null;
+    watch(
+      elRef,
+      (el, preElm, onInvalidate) => {
+        if (!el) return;
+        resizeObserver && resizeObserver.disconnect();
+        resizeObserver = new ResizeObserver((entries) => {
+          entries.forEach((entry) => {
+            state.width = entry.target.clientWidth;
+            state.height = entry.target.clientHeight;
+          });
+        });
+        resizeObserver.observe(el as HTMLElement);
+        onInvalidate(() => {
+          resizeObserver && resizeObserver.disconnect();
+        });
+      },
+      { immediate: true },
+    );
+  });
+
+  return [state, elRef];
+}
+
+export default useSize;
diff --git a/src/useToggle/__demo__/index.tsx b/src/useToggle/__demo__/index.tsx
index 8417e68..2c42b09 100644
--- a/src/useToggle/__demo__/index.tsx
+++ b/src/useToggle/__demo__/index.tsx
@@ -1,32 +1,32 @@
-import { Component } from 'vue';
-import useToggle from '../index';
-export default {
-  setup() {
-    const [toggleRef, { toggle, setLeft, setRight }] = useToggle();
-    return {
-      toggleRef,
-      toggle,
-      setLeft,
-      setRight,
-    };
-  },
-  render: _ctx => {
-    return (
-      <div>
-        <p>Effects：{_ctx.toggleRef.toString()}</p>
-        <p>
-          <button type="button" onClick={_ctx.toggle}>
-            Toggle
-          </button>
-          <button type="button" onClick={_ctx.setLeft} style="margin-left:16px">
-            Toggle False
-          </button>
-          <button type="button" onClick={_ctx.setRight} style="margin-left:16px">
-            {' '}
-            Toggle True
-          </button>
-        </p>
-      </div>
-    );
-  },
-} as Component;
+import { Component } from 'vue';
+import useToggle from '../index';
+export default {
+  setup() {
+    const [toggleRef, { toggle, setLeft, setRight }] = useToggle();
+    return {
+      toggleRef,
+      toggle,
+      setLeft,
+      setRight,
+    };
+  },
+  render: (_ctx) => {
+    return (
+      <div>
+        <p>Effects：{_ctx.toggleRef.toString()}</p>
+        <p>
+          <button type="button" onClick={_ctx.toggle}>
+            Toggle
+          </button>
+          <button type="button" onClick={_ctx.setLeft} style="margin-left:16px">
+            Toggle False
+          </button>
+          <button type="button" onClick={_ctx.setRight} style="margin-left:16px">
+            {' '}
+            Toggle True
+          </button>
+        </p>
+      </div>
+    );
+  },
+} as Component;
diff --git a/src/useToggle/__test__/index.spec.ts b/src/useToggle/__test__/index.spec.ts
index b8ae2b8..e74df39 100644
--- a/src/useToggle/__test__/index.spec.ts
+++ b/src/useToggle/__test__/index.spec.ts
@@ -1,14 +1,14 @@
-import useToggle from '../index';
-
-describe('useToggle', () => {
-  test('default', async () => {
-    const [state, { toggle, setLeft, setRight }] = useToggle();
-    expect(state.value).toBe(false);
-    toggle();
-    expect(state.value).toBe(true);
-    setLeft();
-    expect(state.value).toBe(false);
-    setRight();
-    expect(state.value).toBe(true);
-  });
-});
+import useToggle from '../index';
+
+describe('useToggle', () => {
+  test('default', async () => {
+    const [state, { toggle, setLeft, setRight }] = useToggle();
+    expect(state.value).toBe(false);
+    toggle();
+    expect(state.value).toBe(true);
+    setLeft();
+    expect(state.value).toBe(false);
+    setRight();
+    expect(state.value).toBe(true);
+  });
+});
diff --git a/src/useToggle/index.ts b/src/useToggle/index.ts
index aa372e9..79acc11 100644
--- a/src/useToggle/index.ts
+++ b/src/useToggle/index.ts
@@ -1,52 +1,52 @@
-import { ref, Ref } from 'vue';
-type IState = string | number | boolean | undefined;
-
-export interface Actions<T = IState> {
-  setLeft: () => void;
-  setRight: () => void;
-  toggle: (value?: T) => void;
-}
-
-function useToggle<T = boolean | undefined>(): [Ref<boolean>, Actions<T>];
-
-function useToggle<T = IState>(defaultValue: T): [Ref<T>, Actions<T>];
-
-function useToggle<T = IState, U = IState>(
-  defaultValue: T,
-  reverseValue: U,
-): [T | U, Actions<T | U>];
-
-function useToggle<D extends IState = IState, R extends IState = IState>(
-  defaultValue: D = false as D,
-  reverseValue?: R | boolean,
-): [Ref, Actions] {
-  reverseValue = reverseValue === undefined ? !defaultValue : reverseValue;
-  const stateRef = ref(defaultValue) as Ref;
-  function toggle(value?: D | R) {
-    if (value === undefined) {
-      stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
-      return;
-    }
-    if (value === defaultValue || value === reverseValue) {
-      stateRef.value = value;
-    } else {
-      stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
-      console.warn(`Function toggle parameter must be ${defaultValue} or ${reverseValue}`);
-    }
-    return;
-  }
-  function setLeft() {
-    stateRef.value = defaultValue;
-  }
-  function setRight() {
-    stateRef.value = reverseValue;
-  }
-  const actions = {
-    toggle,
-    setLeft,
-    setRight,
-  };
-  return [stateRef, actions];
-}
-
-export default useToggle;
+import { ref, Ref } from 'vue';
+type IState = string | number | boolean | undefined;
+
+export interface Actions<T = IState> {
+  setLeft: () => void;
+  setRight: () => void;
+  toggle: (value?: T) => void;
+}
+
+function useToggle<T = boolean | undefined>(): [Ref<boolean>, Actions<T>];
+
+function useToggle<T = IState>(defaultValue: T): [Ref<T>, Actions<T>];
+
+function useToggle<T = IState, U = IState>(
+  defaultValue: T,
+  reverseValue: U,
+): [T | U, Actions<T | U>];
+
+function useToggle<D extends IState = IState, R extends IState = IState>(
+  defaultValue: D = false as D,
+  reverseValue?: R | boolean,
+): [Ref, Actions] {
+  reverseValue = reverseValue === undefined ? !defaultValue : reverseValue;
+  const stateRef = ref(defaultValue) as Ref;
+  function toggle(value?: D | R) {
+    if (value === undefined) {
+      stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
+      return;
+    }
+    if (value === defaultValue || value === reverseValue) {
+      stateRef.value = value;
+    } else {
+      stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
+      console.warn(`Function toggle parameter must be ${defaultValue} or ${reverseValue}`);
+    }
+    return;
+  }
+  function setLeft() {
+    stateRef.value = defaultValue;
+  }
+  function setRight() {
+    stateRef.value = reverseValue;
+  }
+  const actions = {
+    toggle,
+    setLeft,
+    setRight,
+  };
+  return [stateRef, actions];
+}
+
+export default useToggle;
diff --git a/src/utils/testingHelpers.ts b/src/utils/testingHelpers.ts
index 9cf58f3..1626ac6 100644
--- a/src/utils/testingHelpers.ts
+++ b/src/utils/testingHelpers.ts
@@ -1,5 +1,5 @@
 export function sleep(time: number): Promise<any> {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     setTimeout(() => {
       resolve(true);
     }, time);
diff --git a/src/utils/typeHelpers.ts b/src/utils/typeHelpers.ts
index dba6224..6beb75d 100644
--- a/src/utils/typeHelpers.ts
+++ b/src/utils/typeHelpers.ts
@@ -1,7 +1,7 @@
-import { ComponentPublicInstance } from 'vue';
-export type ElementType = Element | ComponentPublicInstance;
-export function isComponentPublicInstance(
-  instance: ElementType,
-): instance is ComponentPublicInstance {
-  return (instance as ComponentPublicInstance).$ !== undefined;
-}
+import { ComponentPublicInstance } from 'vue';
+export type ElementType = Element | ComponentPublicInstance;
+export function isComponentPublicInstance(
+  instance: ElementType,
+): instance is ComponentPublicInstance {
+  return (instance as ComponentPublicInstance).$ !== undefined;
+}