diff --git a/packages/core/onClickOutside/component.ts b/packages/core/onClickOutside/component.ts
index acd72d59fd1..1a0cd6f9ad1 100644
--- a/packages/core/onClickOutside/component.ts
+++ b/packages/core/onClickOutside/component.ts
@@ -1,17 +1,20 @@
-import type { RenderableComponent } from '../types'
-import type { OnClickOutsideOptions } from './index'
+import type { OnClickOutsideOptions, RenderableComponent } from '@vueuse/core'
 import { onClickOutside } from '@vueuse/core'
 import { defineComponent, h, shallowRef } from 'vue'
 
 export interface OnClickOutsideProps extends RenderableComponent {
   options?: Omit<OnClickOutsideOptions, 'controls'>
 }
+// eslint-disable-next-line ts/consistent-type-definitions
+export type OnClickOutsideEmits = {
+  trigger: (event: Event) => void
+}
 
-export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProps>({
-  name: 'OnClickOutside',
-  props: ['as', 'options'] as unknown as undefined,
-  emits: ['trigger'],
-  setup(props, { slots, emit }) {
+export const OnClickOutside = /* #__PURE__ */ defineComponent<
+  OnClickOutsideProps,
+  OnClickOutsideEmits
+>(
+  (props, { slots, emit }) => {
     const target = shallowRef<HTMLDivElement>()
     onClickOutside(target, (e) => {
       emit('trigger', e)
@@ -22,4 +25,9 @@ export const OnClickOutside = /* #__PURE__ */ defineComponent<OnClickOutsideProp
         return h(props.as || 'div', { ref: target }, slots.default())
     }
   },
-})
+  {
+    name: 'OnClickOutside',
+    props: ['as', 'options'],
+    emits: ['trigger'],
+  },
+)
diff --git a/packages/core/onClickOutside/directive.ts b/packages/core/onClickOutside/directive.ts
index ec1fc595010..e751d131468 100644
--- a/packages/core/onClickOutside/directive.ts
+++ b/packages/core/onClickOutside/directive.ts
@@ -1,7 +1,7 @@
+import type { OnClickOutsideHandler, OnClickOutsideOptions } from '@vueuse/core'
 import type { Fn } from '@vueuse/shared'
 import type { ObjectDirective } from 'vue'
-import type { OnClickOutsideHandler, OnClickOutsideOptions } from './index'
-import { onClickOutside } from './index'
+import { onClickOutside } from '@vueuse/core'
 
 type StopHandle = Fn | { stop: Fn, cancel: Fn, trigger: (event: Event) => void }
 
diff --git a/packages/core/onKeyStroke/directive.ts b/packages/core/onKeyStroke/directive.ts
index 01841939b87..69cee50f536 100644
--- a/packages/core/onKeyStroke/directive.ts
+++ b/packages/core/onKeyStroke/directive.ts
@@ -1,6 +1,6 @@
+import type { OnKeyStrokeOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { OnKeyStrokeOptions } from './index'
-import { onKeyStroke } from './index'
+import { onKeyStroke } from '@vueuse/core'
 
 type BindingValueFunction = (event: KeyboardEvent) => void
 
diff --git a/packages/core/onLongPress/component.ts b/packages/core/onLongPress/component.ts
index 561528bfed4..09fdc1e2312 100644
--- a/packages/core/onLongPress/component.ts
+++ b/packages/core/onLongPress/component.ts
@@ -1,28 +1,44 @@
-import type { RenderableComponent } from '../types'
-import type { OnLongPressOptions } from './index'
+import type { OnLongPressOptions, RenderableComponent, UseOnLongPressReturn } from '@vueuse/core'
+import type { SlotsType } from 'vue'
+import { onLongPress } from '@vueuse/core'
 import { defineComponent, h, shallowRef } from 'vue'
-import { onLongPress } from './index'
 
 export interface OnLongPressProps extends RenderableComponent {
   options?: OnLongPressOptions
 }
+// eslint-disable-next-line ts/consistent-type-definitions
+export type OnLongPressEmits = {
+  trigger: (event: PointerEvent) => void
+}
+
+interface OnLongPressSlots {
+  default: (data: UseOnLongPressReturn) => any
+}
 
-export const OnLongPress = /* #__PURE__ */ defineComponent<OnLongPressProps>({
-  name: 'OnLongPress',
-  props: ['as', 'options'] as unknown as undefined,
-  emits: ['trigger'],
-  setup(props, { slots, emit }) {
+export const OnLongPress = /* #__PURE__ */ defineComponent<
+  OnLongPressProps,
+  OnLongPressEmits,
+  string,
+  SlotsType<OnLongPressSlots>
+>(
+  (props, { slots, emit }) => {
     const target = shallowRef<HTMLElement>()
-    onLongPress(
+    const data = onLongPress(
       target,
       (e) => {
         emit('trigger', e)
       },
       props.options,
     )
+
     return () => {
       if (slots.default)
-        return h(props.as || 'div', { ref: target }, slots.default())
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'OnLongPress',
+    props: ['as', 'options'],
+    emits: ['trigger'],
+  },
+)
diff --git a/packages/core/onLongPress/directive.ts b/packages/core/onLongPress/directive.ts
index 1a47b763113..543f46193ec 100644
--- a/packages/core/onLongPress/directive.ts
+++ b/packages/core/onLongPress/directive.ts
@@ -1,7 +1,6 @@
+import type { OnLongPressOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { OnLongPressOptions } from './index'
-
-import { onLongPress } from './index'
+import { onLongPress } from '@vueuse/core'
 
 type BindingValueFunction = (evt: PointerEvent) => void
 
diff --git a/packages/core/onLongPress/index.ts b/packages/core/onLongPress/index.ts
index d7e2c4c1b5f..b9168882691 100644
--- a/packages/core/onLongPress/index.ts
+++ b/packages/core/onLongPress/index.ts
@@ -147,3 +147,5 @@ export function onLongPress(
 
   return stop
 }
+
+export type UseOnLongPressReturn = ReturnType<typeof onLongPress>
diff --git a/packages/core/useActiveElement/component.ts b/packages/core/useActiveElement/component.ts
index 0399dd8626b..0ddaeb74576 100644
--- a/packages/core/useActiveElement/component.ts
+++ b/packages/core/useActiveElement/component.ts
@@ -1,11 +1,22 @@
+import type { UseActiveElementOptions, UseActiveElementReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useActiveElement } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseActiveElement = /* #__PURE__ */ defineComponent({
-  name: 'UseActiveElement',
-  setup(props, { slots }) {
+export interface UseActiveElementProps extends UseActiveElementOptions {}
+interface UseActiveElementSlots {
+  default: (data: Reactive<{ element: UseActiveElementReturn }>) => any
+}
+
+export const UseActiveElement = /* #__PURE__ */ defineComponent<
+  UseActiveElementProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseActiveElementSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      element: useActiveElement(),
+      element: useActiveElement(props),
     })
 
     return () => {
@@ -13,4 +24,13 @@ export const UseActiveElement = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseActiveElement',
+    props: [
+      'deep',
+      'triggerOnRemoval',
+      'window',
+      'document',
+    ],
+  },
+)
diff --git a/packages/core/useActiveElement/index.md b/packages/core/useActiveElement/index.md
index e102e2a2d8d..8b3bc3b73e0 100644
--- a/packages/core/useActiveElement/index.md
+++ b/packages/core/useActiveElement/index.md
@@ -26,7 +26,7 @@ watch(activeElement, (el) => {
 ```vue
 <template>
   <UseActiveElement v-slot="{ element }">
-    Active element is {{ element.dataset.id }}
+    Active element is {{ element?.dataset.id }}
   </UseActiveElement>
 </template>
 ```
diff --git a/packages/core/useActiveElement/index.ts b/packages/core/useActiveElement/index.ts
index d2a1d990ea9..93ce1a44d50 100644
--- a/packages/core/useActiveElement/index.ts
+++ b/packages/core/useActiveElement/index.ts
@@ -83,3 +83,5 @@ export function useActiveElement<T extends HTMLElement>(
 
   return activeElement
 }
+
+export type UseActiveElementReturn = ReturnType<typeof useActiveElement>
diff --git a/packages/core/useBattery/component.ts b/packages/core/useBattery/component.ts
index beaadb602ef..89818629a1c 100644
--- a/packages/core/useBattery/component.ts
+++ b/packages/core/useBattery/component.ts
@@ -1,9 +1,20 @@
+import type { ConfigurableNavigator, UseBatteryReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useBattery } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseBattery = /* #__PURE__ */ defineComponent({
-  name: 'UseBattery',
-  setup(props, { slots }) {
+export interface UseBatteryProps extends ConfigurableNavigator {}
+interface UseBatterySlots {
+  default: (data: Reactive<UseBatteryReturn>) => any
+}
+
+export const UseBattery = /* #__PURE__ */ defineComponent<
+  UseBatteryProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseBatterySlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useBattery(props))
 
     return () => {
@@ -11,4 +22,8 @@ export const UseBattery = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseBattery',
+    props: ['navigator'],
+  },
+)
diff --git a/packages/core/useBrowserLocation/component.ts b/packages/core/useBrowserLocation/component.ts
index 3c62a8a70f5..8eb8cb3a700 100644
--- a/packages/core/useBrowserLocation/component.ts
+++ b/packages/core/useBrowserLocation/component.ts
@@ -1,14 +1,29 @@
+import type { ConfigurableWindow, UseBrowserLocationReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useBrowserLocation } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseBrowserLocation = /* #__PURE__ */ defineComponent({
-  name: 'UseBrowserLocation',
-  setup(props, { slots }) {
-    const data = reactive(useBrowserLocation())
+interface UseBrowserLocationProps extends ConfigurableWindow {}
+interface UseBrowserLocationSlots {
+  default: (data: Reactive<UseBrowserLocationReturn>) => any
+}
+
+export const UseBrowserLocation = /* #__PURE__ */ defineComponent<
+  UseBrowserLocationProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseBrowserLocationSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useBrowserLocation(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseBrowserLocation',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useBrowserLocation/index.md b/packages/core/useBrowserLocation/index.md
index d4adf7e257b..f5bd15c2dad 100644
--- a/packages/core/useBrowserLocation/index.md
+++ b/packages/core/useBrowserLocation/index.md
@@ -19,7 +19,7 @@ const location = useBrowserLocation()
 ## Component Usage
 
 ```vue
-<UseBrowserLocation v-slot="{ location }">
+<UseBrowserLocation v-slot="location">
   Browser Location: {{ location }}
 </UseBrowserLocation>
 ```
diff --git a/packages/core/useClipboard/component.ts b/packages/core/useClipboard/component.ts
index fc00627da54..dcf086c489f 100644
--- a/packages/core/useClipboard/component.ts
+++ b/packages/core/useClipboard/component.ts
@@ -1,22 +1,35 @@
-import type { UseClipboardOptions } from '@vueuse/core'
+import type { UseClipboardOptions, UseClipboardReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {}
+export interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {}
+interface UseClipboardSlots {
+  default: (data: Reactive<UseClipboardReturn<true>>) => any
+}
 
-export const UseClipboard = /* #__PURE__ */ defineComponent<UseClipboardProps>({
-  name: 'UseClipboard',
-  props: [
-    'source',
-    'read',
-    'navigator',
-    'copiedDuring',
-    'legacy',
-  ] as unknown as undefined,
-
-  setup(props, { slots }) {
+export const UseClipboard = /* #__PURE__ */ defineComponent<
+  UseClipboardProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseClipboardSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useClipboard(props))
 
-    return () => slots.default?.(data)
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+  {
+    name: 'UseClipboard',
+    props: [
+      'source',
+      'read',
+      'navigator',
+      'copiedDuring',
+      'legacy',
+    ],
   },
-})
+)
diff --git a/packages/core/useColorMode/component.ts b/packages/core/useColorMode/component.ts
index d1d18a98be3..f2f277a91f0 100644
--- a/packages/core/useColorMode/component.ts
+++ b/packages/core/useColorMode/component.ts
@@ -1,11 +1,24 @@
-import type { UseColorModeOptions } from './index'
+import type { BasicColorMode, UseColorModeOptions, UseColorModeReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
+import { useColorMode } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
-import { useColorMode } from './index'
 
-export const UseColorMode = /* #__PURE__ */ defineComponent<UseColorModeOptions>({
-  name: 'UseColorMode',
-  props: ['selector', 'attribute', 'modes', 'onChanged', 'storageKey', 'storage', 'emitAuto'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseColorModeProps extends UseColorModeOptions {}
+interface UseColorModeSlots {
+  default: (data: Reactive<{
+    mode: UseColorModeReturn<BasicColorMode>
+    system: UseColorModeReturn['system']
+    store: UseColorModeReturn['store']
+  }>) => any
+}
+
+export const UseColorMode = /* #__PURE__ */ defineComponent<
+  UseColorModeProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseColorModeSlots>
+>(
+  (props, { slots }) => {
     const mode = useColorMode(props)
     const data = reactive({
       mode,
@@ -18,4 +31,30 @@ export const UseColorMode = /* #__PURE__ */ defineComponent<UseColorModeOptions>
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseColorMode',
+    props: [
+      'attribute',
+      'deep',
+      'disableTransition',
+      'emitAuto',
+      'eventFilter',
+      'flush',
+      'initOnMounted',
+      'initialValue',
+      'listenToStorageChanges',
+      'mergeDefaults',
+      'modes',
+      'onChanged',
+      'onError',
+      'selector',
+      'serializer',
+      'shallow',
+      'storage',
+      'storageKey',
+      'storageRef',
+      'window',
+      'writeDefaults',
+    ],
+  },
+)
diff --git a/packages/core/useColorMode/index.md b/packages/core/useColorMode/index.md
index 38c56283cbc..ef7845f5e5c 100644
--- a/packages/core/useColorMode/index.md
+++ b/packages/core/useColorMode/index.md
@@ -66,9 +66,9 @@ const myColorMode = computed(() => store.value === 'auto' ? system.value : store
 
 ```vue
 <template>
-  <UseColorMode v-slot="{ mode }">
-    <button @click="mode = mode === 'dark' ? 'light' : 'dark'">
-      Mode {{ mode }}
+  <UseColorMode v-slot="color">
+    <button @click="color.mode = color.mode === 'dark' ? 'light' : 'dark'">
+      Mode {{ color.mode }}
     </button>
   </UseColorMode>
 </template>
diff --git a/packages/core/useDark/component.ts b/packages/core/useDark/component.ts
index fb822f6e966..b18a219217c 100644
--- a/packages/core/useDark/component.ts
+++ b/packages/core/useDark/component.ts
@@ -1,12 +1,25 @@
-import type { UseDarkOptions } from '@vueuse/core'
+import type { UseDarkOptions, UseDarkReturn } from '@vueuse/core'
+import type { ToggleFn } from '@vueuse/shared'
+import type { Reactive, SlotsType } from 'vue'
 import { useDark } from '@vueuse/core'
 import { useToggle } from '@vueuse/shared'
 import { defineComponent, reactive } from 'vue'
 
-export const UseDark = /* #__PURE__ */ defineComponent<UseDarkOptions>({
-  name: 'UseDark',
-  props: ['selector', 'attribute', 'valueDark', 'valueLight', 'onChanged', 'storageKey', 'storage'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseDarkProps extends UseDarkOptions {}
+interface UseDarkSlots {
+  default: (data: Reactive<{
+    isDark: UseDarkReturn
+    toggleDark: ToggleFn
+  }>) => any
+}
+
+export const UseDark = /* #__PURE__ */ defineComponent<
+  UseDarkProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDarkSlots>
+>(
+  (props, { slots }) => {
     const isDark = useDark(props)
     const data = reactive({
       isDark,
@@ -18,4 +31,31 @@ export const UseDark = /* #__PURE__ */ defineComponent<UseDarkOptions>({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDark',
+    props: [
+      'attribute',
+      'deep',
+      'disableTransition',
+      'emitAuto',
+      'eventFilter',
+      'flush',
+      'initOnMounted',
+      'initialValue',
+      'listenToStorageChanges',
+      'mergeDefaults',
+      'onChanged',
+      'onError',
+      'selector',
+      'serializer',
+      'shallow',
+      'storage',
+      'storageKey',
+      'storageRef',
+      'valueDark',
+      'valueLight',
+      'window',
+      'writeDefaults',
+    ],
+  },
+)
diff --git a/packages/core/useDark/index.ts b/packages/core/useDark/index.ts
index 3539825f301..6e2e60f4acf 100644
--- a/packages/core/useDark/index.ts
+++ b/packages/core/useDark/index.ts
@@ -69,3 +69,5 @@ export function useDark(options: UseDarkOptions = {}) {
 
   return isDark
 }
+
+export type UseDarkReturn = ReturnType<typeof useDark>
diff --git a/packages/core/useDeviceMotion/component.ts b/packages/core/useDeviceMotion/component.ts
index 1d7adc8455c..30c8b3b794f 100644
--- a/packages/core/useDeviceMotion/component.ts
+++ b/packages/core/useDeviceMotion/component.ts
@@ -1,14 +1,33 @@
+import type { DeviceMotionOptions, UseDeviceMotionReturn } from '@vueuse/core'
+import type { SlotsType } from 'vue'
 import { useDeviceMotion } from '@vueuse/core'
 import { defineComponent } from 'vue'
 
-export const UseDeviceMotion = /* #__PURE__ */ defineComponent({
-  name: 'UseDeviceMotion',
-  setup(props, { slots }) {
-    const data = useDeviceMotion()
+export interface UseDeviceMotionProps extends DeviceMotionOptions {}
+interface UseDeviceMotionSlots {
+  default: (data: UseDeviceMotionReturn) => any
+}
+
+export const UseDeviceMotion = /* #__PURE__ */ defineComponent<
+  UseDeviceMotionProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDeviceMotionSlots>
+>(
+  (props, { slots }) => {
+    const data = useDeviceMotion(props)
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDeviceMotion',
+    props: [
+      'eventFilter',
+      'requestPermissions',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useDeviceOrientation/component.ts b/packages/core/useDeviceOrientation/component.ts
index 5ccf58622e6..58b52cb8fc1 100644
--- a/packages/core/useDeviceOrientation/component.ts
+++ b/packages/core/useDeviceOrientation/component.ts
@@ -1,14 +1,29 @@
+import type { ConfigurableWindow, UseDeviceOrientationReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useDeviceOrientation } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseDeviceOrientation = /* #__PURE__ */ defineComponent({
-  name: 'UseDeviceOrientation',
-  setup(props, { slots }) {
-    const data = reactive(useDeviceOrientation())
+export interface UseDeviceOrientationProps extends ConfigurableWindow {}
+interface UseDeviceOrientationSlots {
+  default: (data: Reactive<UseDeviceOrientationReturn>) => any
+}
+
+export const UseDeviceOrientation = /* #__PURE__ */ defineComponent<
+  UseDeviceOrientationProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDeviceOrientationSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useDeviceOrientation(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDeviceOrientation',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useDevicePixelRatio/component.ts b/packages/core/useDevicePixelRatio/component.ts
index 51114a08a14..c5c22f0dfe5 100644
--- a/packages/core/useDevicePixelRatio/component.ts
+++ b/packages/core/useDevicePixelRatio/component.ts
@@ -1,16 +1,29 @@
+import type { ConfigurableWindow, UseDevicePixelRatioReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useDevicePixelRatio } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseDevicePixelRatio = /* #__PURE__ */ defineComponent({
-  name: 'UseDevicePixelRatio',
-  setup(props, { slots }) {
-    const data = reactive({
-      pixelRatio: useDevicePixelRatio(),
-    })
+export interface UseDevicePixelRatioProps extends ConfigurableWindow {}
+interface UseDevicePixelRatioSlots {
+  default: (data: Reactive<UseDevicePixelRatioReturn>) => any
+}
+
+export const UseDevicePixelRatio = /* #__PURE__ */ defineComponent<
+  UseDevicePixelRatioProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDevicePixelRatioSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useDevicePixelRatio(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDevicePixelRatio',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useDevicesList/component.ts b/packages/core/useDevicesList/component.ts
index da449e9c48a..ac0667df128 100644
--- a/packages/core/useDevicesList/component.ts
+++ b/packages/core/useDevicesList/component.ts
@@ -1,11 +1,20 @@
-import type { UseDevicesListOptions } from '@vueuse/core'
+import type { UseDevicesListOptions, UseDevicesListReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useDevicesList } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseDevicesList = /* #__PURE__ */ defineComponent<UseDevicesListOptions>({
-  name: 'UseDevicesList',
-  props: ['onUpdated', 'requestPermissions', 'constraints'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseDevicesListProps extends UseDevicesListOptions {}
+interface UseDevicesListSlots {
+  default: (data: Reactive<UseDevicesListReturn>) => any
+}
+
+export const UseDevicesList = /* #__PURE__ */ defineComponent<
+  UseDevicesListProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDevicesListSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useDevicesList(props))
 
     return () => {
@@ -13,4 +22,13 @@ export const UseDevicesList = /* #__PURE__ */ defineComponent<UseDevicesListOpti
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDevicesList',
+    props: [
+      'constraints',
+      'navigator',
+      'onUpdated',
+      'requestPermissions',
+    ],
+  },
+)
diff --git a/packages/core/useDocumentVisibility/component.ts b/packages/core/useDocumentVisibility/component.ts
index 855edfade58..3f96df87daa 100644
--- a/packages/core/useDocumentVisibility/component.ts
+++ b/packages/core/useDocumentVisibility/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableDocument, UseDocumentVisibilityReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useDocumentVisibility } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseDocumentVisibility = /* #__PURE__ */ defineComponent({
-  name: 'UseDocumentVisibility',
-  setup(props, { slots }) {
+export interface UseDocumentVisibilityProps extends ConfigurableDocument {}
+interface UseDocumentVisibilitySlots {
+  default: (data: Reactive<{
+    visibility: UseDocumentVisibilityReturn
+  }>) => any
+}
+
+export const UseDocumentVisibility = /* #__PURE__ */ defineComponent<
+  UseDocumentVisibilityProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseDocumentVisibilitySlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      visibility: useDocumentVisibility(),
+      visibility: useDocumentVisibility(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UseDocumentVisibility = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseDocumentVisibility',
+    props: ['document'],
+  },
+)
diff --git a/packages/core/useDocumentVisibility/index.ts b/packages/core/useDocumentVisibility/index.ts
index 0171ebfab72..fa3fa450d73 100644
--- a/packages/core/useDocumentVisibility/index.ts
+++ b/packages/core/useDocumentVisibility/index.ts
@@ -1,4 +1,3 @@
-import type { ShallowRef } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import { shallowRef } from 'vue'
 import { defaultDocument } from '../_configurable'
@@ -11,7 +10,7 @@ import { useEventListener } from '../useEventListener'
  *
  * @__NO_SIDE_EFFECTS__
  */
-export function useDocumentVisibility(options: ConfigurableDocument = {}): ShallowRef<DocumentVisibilityState> {
+export function useDocumentVisibility(options: ConfigurableDocument = {}) {
   const { document = defaultDocument } = options
   if (!document)
     return shallowRef('visible')
@@ -24,3 +23,5 @@ export function useDocumentVisibility(options: ConfigurableDocument = {}): Shall
 
   return visibility
 }
+
+export type UseDocumentVisibilityReturn = ReturnType<typeof useDocumentVisibility>
diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
index bd68a2a312a..983d1669662 100644
--- a/packages/core/useDraggable/component.ts
+++ b/packages/core/useDraggable/component.ts
@@ -1,5 +1,5 @@
-import type { UseDraggableOptions } from '@vueuse/core'
-import type { Position, RenderableComponent } from '../types'
+import type { Position, RenderableComponent, UseDraggableOptions } from '@vueuse/core'
+import type { SlotsType } from 'vue'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
 import { computed, defineComponent, h, reactive, shallowRef, toValue } from 'vue'
 
@@ -17,28 +17,13 @@ export interface UseDraggableProps extends UseDraggableOptions, RenderableCompon
   storageType?: 'local' | 'session'
 }
 
-export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
-  name: 'UseDraggable',
-  props: [
-    'storageKey',
-    'storageType',
-    'initialValue',
-    'exact',
-    'preventDefault',
-    'stopPropagation',
-    'pointerTypes',
-    'as',
-    'handle',
-    'axis',
-    'onStart',
-    'onMove',
-    'onEnd',
-    'disabled',
-    'buttons',
-    'containerElement',
-    'capture',
-  ] as unknown as undefined,
-  setup(props, { slots }) {
+export const UseDraggable = /* #__PURE__ */ defineComponent<
+  UseDraggableProps,
+  Record<string, never>,
+  string,
+  SlotsType<any>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLElement | SVGElement | null>()
     const handle = computed(() => toValue(props.handle) ?? target.value)
     const containerElement = computed(() => props.containerElement as (HTMLElement | SVGElement | null | undefined) ?? undefined)
@@ -75,4 +60,27 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
         return h(props.as || 'div', { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseDraggable',
+    props: [
+      'storageKey',
+      'storageType',
+      'initialValue',
+      'exact',
+      'preventDefault',
+      'stopPropagation',
+      'pointerTypes',
+      'as',
+      'handle',
+      'axis',
+      'onStart',
+      'onMove',
+      'onEnd',
+      'disabled',
+      'buttons',
+      'containerElement',
+      'capture',
+      'draggingElement',
+    ],
+  },
+)
diff --git a/packages/core/useElementBounding/component.ts b/packages/core/useElementBounding/component.ts
index 6451b141036..b2a046e9520 100644
--- a/packages/core/useElementBounding/component.ts
+++ b/packages/core/useElementBounding/component.ts
@@ -1,18 +1,37 @@
-import type { RenderableComponent } from '../types'
-import type { UseResizeObserverOptions } from '../useResizeObserver'
+import type { RenderableComponent, UseElementBoundingOptions, UseElementBoundingReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useElementBounding } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseElementBounding = /* #__PURE__ */ defineComponent<UseResizeObserverOptions & RenderableComponent>({
-  name: 'UseElementBounding',
-  props: ['box', 'as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseElementBoundingProps extends UseElementBoundingOptions, RenderableComponent {}
+interface UseElementBoundingSlots {
+  default: (data: Reactive<UseElementBoundingReturn>) => any
+}
+
+export const UseElementBounding = /* #__PURE__ */ defineComponent<
+  UseElementBoundingProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseElementBoundingSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLElement>()
-    const data = reactive(useElementBounding(target))
+    const data = reactive(useElementBounding(target, props))
 
     return () => {
       if (slots.default)
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseElementBounding',
+    props: [
+      'as',
+      'immediate',
+      'reset',
+      'updateTiming',
+      'windowResize',
+      'windowScroll',
+    ],
+  },
+)
diff --git a/packages/core/useElementBounding/directive.ts b/packages/core/useElementBounding/directive.ts
index c1c36d5f064..96c7d5c4ade 100644
--- a/packages/core/useElementBounding/directive.ts
+++ b/packages/core/useElementBounding/directive.ts
@@ -1,7 +1,7 @@
+import type { UseElementBoundingOptions, UseElementBoundingReturn } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseElementBoundingOptions, UseElementBoundingReturn } from './index'
+import { useElementBounding } from '@vueuse/core'
 import { watch } from 'vue'
-import { useElementBounding } from './index'
 
 type ElementBounding = Omit<UseElementBoundingReturn, 'update'>
 type BindingValueFunction = (bounding: ElementBounding) => void
diff --git a/packages/core/useElementHover/directive.ts b/packages/core/useElementHover/directive.ts
index d6121f6a699..b14d079f4c3 100644
--- a/packages/core/useElementHover/directive.ts
+++ b/packages/core/useElementHover/directive.ts
@@ -1,7 +1,7 @@
+import type { UseElementHoverOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseElementHoverOptions } from './index'
+import { useElementHover } from '@vueuse/core'
 import { watch } from 'vue'
-import { useElementHover } from './index'
 
 type BindingValueFunction = (state: boolean) => void
 
diff --git a/packages/core/useElementSize/component.ts b/packages/core/useElementSize/component.ts
index f7aa05dff3c..4bf051cd86c 100644
--- a/packages/core/useElementSize/component.ts
+++ b/packages/core/useElementSize/component.ts
@@ -1,19 +1,40 @@
-import type { ElementSize } from '@vueuse/core'
-import type { RenderableComponent } from '../types'
-import type { UseResizeObserverOptions } from '../useResizeObserver'
+import type { ElementSize, RenderableComponent, UseElementSizeReturn, UseResizeObserverOptions } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useElementSize } from '@vueuse/core'
-import { defineComponent, h, reactive, shallowRef } from 'vue'
+import { defineComponent, h, reactive, shallowRef, toRefs, toValue } from 'vue'
 
-export const UseElementSize = /* #__PURE__ */ defineComponent<Partial<ElementSize> & UseResizeObserverOptions & RenderableComponent>({
-  name: 'UseElementSize',
-  props: ['width', 'height', 'box', 'as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseElementSizeProps extends Partial<ElementSize>, UseResizeObserverOptions, RenderableComponent {}
+interface UseElementSizeSlots {
+  default: (data: Reactive<UseElementSizeReturn>) => any
+}
+
+export const UseElementSize = /* #__PURE__ */ defineComponent<
+  UseElementSizeProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseElementSizeSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
-    const data = reactive(useElementSize(target, { width: props.width ?? 0, height: props.height ?? 0 }, { box: props.box }))
+    const { width, height } = toRefs(props)
+    const data = reactive(useElementSize(target, { width: toValue(width) ?? 0, height: toValue(height) ?? 0 }, {
+      box: props.box,
+      window: props.window,
+    }))
 
     return () => {
       if (slots.default)
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseElementSize',
+    props: [
+      'as',
+      'box',
+      'height',
+      'width',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useElementSize/directive.ts b/packages/core/useElementSize/directive.ts
index 632782df53e..a9a369dffa8 100644
--- a/packages/core/useElementSize/directive.ts
+++ b/packages/core/useElementSize/directive.ts
@@ -1,7 +1,7 @@
+import type { ElementSize } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { ElementSize } from './index'
+import { useElementSize } from '@vueuse/core'
 import { watch } from 'vue'
-import { useElementSize } from './index'
 
 type RemoveFirstFromTuple<T extends any[]>
   = T['length'] extends 0 ? undefined
diff --git a/packages/core/useElementVisibility/component.ts b/packages/core/useElementVisibility/component.ts
index be0691dcc83..e023ecc3baa 100644
--- a/packages/core/useElementVisibility/component.ts
+++ b/packages/core/useElementVisibility/component.ts
@@ -1,14 +1,25 @@
-import type { RenderableComponent } from '../types'
+import type { RenderableComponent, UseElementVisibilityOptions, UseElementVisibilityReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseElementVisibility = /* #__PURE__ */ defineComponent<RenderableComponent>({
-  name: 'UseElementVisibility',
-  props: ['as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseElementVisibilityProps extends UseElementVisibilityOptions, RenderableComponent {}
+interface UseElementVisibilitySlots {
+  default: (data: Reactive<{
+    isVisible: UseElementVisibilityReturn
+  }>) => any
+}
+
+export const UseElementVisibility = /* #__PURE__ */ defineComponent<
+  UseElementVisibilityProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseElementVisibilitySlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
     const data = reactive({
-      isVisible: useElementVisibility(target),
+      isVisible: useElementVisibility(target, props),
     })
 
     return () => {
@@ -16,4 +27,15 @@ export const UseElementVisibility = /* #__PURE__ */ defineComponent<RenderableCo
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseElementVisibility',
+    props: [
+      'as',
+      'once',
+      'rootMargin',
+      'scrollTarget',
+      'threshold',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useElementVisibility/directive.ts b/packages/core/useElementVisibility/directive.ts
index 671029163dc..1d66d53624a 100644
--- a/packages/core/useElementVisibility/directive.ts
+++ b/packages/core/useElementVisibility/directive.ts
@@ -1,8 +1,7 @@
+import type { UseElementVisibilityOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseElementVisibilityOptions } from './index'
-
+import { useElementVisibility } from '@vueuse/core'
 import { watch } from 'vue'
-import { useElementVisibility } from './index'
 
 type BindingValueFunction = (state: boolean) => void
 
diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
index d840fa03367..984f374805a 100644
--- a/packages/core/useElementVisibility/index.ts
+++ b/packages/core/useElementVisibility/index.ts
@@ -73,3 +73,5 @@ export function useElementVisibility(
 
   return elementIsVisible
 }
+
+export type UseElementVisibilityReturn = ReturnType<typeof useElementVisibility>
diff --git a/packages/core/useEyeDropper/component.ts b/packages/core/useEyeDropper/component.ts
index 45d78a3daa7..14fc288fa02 100644
--- a/packages/core/useEyeDropper/component.ts
+++ b/packages/core/useEyeDropper/component.ts
@@ -1,17 +1,29 @@
+import type { UseEyeDropperOptions, UseEyeDropperReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useEyeDropper } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseEyeDropper = /* #__PURE__ */ defineComponent({
-  name: 'UseEyeDropper',
-  props: {
-    sRGBHex: String,
-  },
-  setup(props, { slots }) {
-    const data = reactive(useEyeDropper())
+export interface UseEyeDropperProps extends UseEyeDropperOptions {}
+interface UseEyeDropperSlots {
+  default: (data: Reactive<UseEyeDropperReturn>) => any
+}
+
+export const UseEyeDropper = /* #__PURE__ */ defineComponent<
+  UseEyeDropperProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseEyeDropperSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useEyeDropper(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseEyeDropper',
+    props: ['initialValue'],
+  },
+)
diff --git a/packages/core/useEyeDropper/index.md b/packages/core/useEyeDropper/index.md
index 1dfacc4823d..e4ea52c4e2d 100644
--- a/packages/core/useEyeDropper/index.md
+++ b/packages/core/useEyeDropper/index.md
@@ -19,7 +19,7 @@ const { isSupported, open, sRGBHex } = useEyeDropper()
 ```vue
 <template>
   <UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
-    <button :disabled="!isSupported" @click="open">
+    <button :disabled="!isSupported" @click="() => open()">
       sRGBHex: {{ sRGBHex }}
     </button>
   </UseEyeDropper>
diff --git a/packages/core/useFullscreen/component.ts b/packages/core/useFullscreen/component.ts
index dfd6c512d84..a563c329f86 100644
--- a/packages/core/useFullscreen/component.ts
+++ b/packages/core/useFullscreen/component.ts
@@ -1,17 +1,34 @@
-import type { RenderableComponent } from '../types'
+import type { RenderableComponent, UseFullscreenOptions, UseFullscreenReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useFullscreen } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseFullscreen = /* #__PURE__ */ defineComponent<RenderableComponent>({
-  name: 'UseFullscreen',
-  props: ['as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseFullscreenProps extends UseFullscreenOptions, RenderableComponent {}
+interface UseFullscreenSlots {
+  default: (data: Reactive<UseFullscreenReturn>) => any
+}
+
+export const UseFullscreen = /* #__PURE__ */ defineComponent<
+  UseFullscreenProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseFullscreenSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
-    const data = reactive(useFullscreen(target))
+    const data = reactive(useFullscreen(target, props))
 
     return () => {
       if (slots.default)
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseFullscreen',
+    props: [
+      'as',
+      'autoExit',
+      'document',
+    ],
+  },
+)
diff --git a/packages/core/useGeolocation/component.ts b/packages/core/useGeolocation/component.ts
index bddfaed6962..a00d927e8c8 100644
--- a/packages/core/useGeolocation/component.ts
+++ b/packages/core/useGeolocation/component.ts
@@ -1,15 +1,35 @@
-import type { UseGeolocationOptions } from '@vueuse/core'
+import type { UseGeolocationOptions, UseGeolocationReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useGeolocation } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseGeolocation = /* #__PURE__ */ defineComponent<UseGeolocationOptions>({
-  name: 'UseGeolocation',
-  props: ['enableHighAccuracy', 'maximumAge', 'timeout', 'navigator'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseGeolocationProps extends UseGeolocationOptions {}
+interface UseGeolocationSlots {
+  default: (data: Reactive<UseGeolocationReturn>) => any
+}
+
+export const UseGeolocation = /* #__PURE__ */ defineComponent<
+  UseGeolocationProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseGeolocationSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useGeolocation(props))
+
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseGeolocation',
+    props: [
+      'enableHighAccuracy',
+      'immediate',
+      'maximumAge',
+      'navigator',
+      'timeout',
+    ],
+  },
+)
diff --git a/packages/core/useIdle/component.ts b/packages/core/useIdle/component.ts
index 283db4ee1db..eb334203aa6 100644
--- a/packages/core/useIdle/component.ts
+++ b/packages/core/useIdle/component.ts
@@ -1,11 +1,22 @@
-import type { UseIdleOptions } from '@vueuse/core'
+import type { UseIdleOptions, UseIdleReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useIdle } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseIdle = /* #__PURE__ */ defineComponent<UseIdleOptions & { timeout: number }>({
-  name: 'UseIdle',
-  props: ['timeout', 'events', 'listenForVisibilityChange', 'initialState'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseIdleProps extends UseIdleOptions {
+  timeout: number
+}
+interface UseIdleSlots {
+  default: (data: Reactive<UseIdleReturn>) => any
+}
+
+export const UseIdle = /* #__PURE__ */ defineComponent<
+  UseIdleProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseIdleSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useIdle(props.timeout, props))
 
     return () => {
@@ -13,4 +24,15 @@ export const UseIdle = /* #__PURE__ */ defineComponent<UseIdleOptions & { timeou
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseIdle',
+    props: [
+      'eventFilter',
+      'events',
+      'initialState',
+      'listenForVisibilityChange',
+      'timeout',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useImage/component.ts b/packages/core/useImage/component.ts
index 696b3a3b82e..e1c8ed33a5e 100644
--- a/packages/core/useImage/component.ts
+++ b/packages/core/useImage/component.ts
@@ -1,29 +1,23 @@
+import type { UseImageOptions, UseImageReturn } from '@vueuse/core'
+import type { Reactive, SlotsType, UnwrapRef } from 'vue'
 import type { RenderableComponent } from '../types'
-import type { UseImageOptions } from '../useImage'
+import { useImage } from '@vueuse/core'
 import { defineComponent, h, reactive } from 'vue'
 
-import { useImage } from '../useImage'
+export interface UseImageProps extends UseImageOptions, RenderableComponent {}
+interface UseImageSlots {
+  default: (data: Reactive<UseImageReturn>) => any
+  loading: (data: Reactive<UseImageReturn>) => any
+  error: (data: UnwrapRef<UseImageReturn['error']>) => any
+}
 
-export const UseImage = /* #__PURE__ */ defineComponent<UseImageOptions & RenderableComponent>({
-  name: 'UseImage',
-  props: [
-    'src',
-    'srcset',
-    'sizes',
-    'as',
-    'alt',
-    'class',
-    'loading',
-    'crossorigin',
-    'referrerPolicy',
-    'width',
-    'height',
-    'decoding',
-    'fetchPriority',
-    'ismap',
-    'usemap',
-  ] as unknown as undefined,
-  setup(props, { slots }) {
+export const UseImage = /* #__PURE__ */ defineComponent<
+  UseImageProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseImageSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useImage(props))
 
     return () => {
@@ -39,4 +33,24 @@ export const UseImage = /* #__PURE__ */ defineComponent<UseImageOptions & Render
       return h(props.as || 'img', props)
     }
   },
-})
+  {
+    name: 'UseImage',
+    props: [
+      'alt',
+      'as',
+      'class',
+      'crossorigin',
+      'decoding',
+      'fetchPriority',
+      'height',
+      'ismap',
+      'loading',
+      'referrerPolicy',
+      'sizes',
+      'src',
+      'srcset',
+      'usemap',
+      'width',
+    ],
+  },
+)
diff --git a/packages/core/useInfiniteScroll/directive.ts b/packages/core/useInfiniteScroll/directive.ts
index effe96992af..e8d630e6af6 100644
--- a/packages/core/useInfiniteScroll/directive.ts
+++ b/packages/core/useInfiniteScroll/directive.ts
@@ -1,6 +1,6 @@
+import type { UseInfiniteScrollOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseInfiniteScrollOptions } from './index'
-import { useInfiniteScroll } from './index'
+import { useInfiniteScroll } from '@vueuse/core'
 
 type BindingValueFunction = Parameters<typeof useInfiniteScroll>[1]
 type BindingValueArray = [BindingValueFunction, UseInfiniteScrollOptions]
diff --git a/packages/core/useIntersectionObserver/directive.ts b/packages/core/useIntersectionObserver/directive.ts
index c913b50a88f..18c6af96642 100644
--- a/packages/core/useIntersectionObserver/directive.ts
+++ b/packages/core/useIntersectionObserver/directive.ts
@@ -1,6 +1,6 @@
+import type { UseIntersectionObserverOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseIntersectionObserverOptions } from './index'
-import { useIntersectionObserver } from './index'
+import { useIntersectionObserver } from '@vueuse/core'
 
 type BindingValueFunction = IntersectionObserverCallback
 
diff --git a/packages/core/useMouse/component.ts b/packages/core/useMouse/component.ts
index fddad812b98..f51775a6128 100644
--- a/packages/core/useMouse/component.ts
+++ b/packages/core/useMouse/component.ts
@@ -1,11 +1,20 @@
-import type { UseMouseOptions } from '@vueuse/core'
+import type { UseMouseOptions, UseMouseReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useMouse } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseMouse = /* #__PURE__ */ defineComponent<UseMouseOptions>({
-  name: 'UseMouse',
-  props: ['touch', 'resetOnTouchEnds', 'initialValue'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseMouseProps extends UseMouseOptions {}
+interface UseMouseSlots {
+  default: (data: Reactive<UseMouseReturn>) => any
+}
+
+export const UseMouse = /* #__PURE__ */ defineComponent<
+  UseMouseProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseMouseSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useMouse(props))
 
     return () => {
@@ -13,4 +22,17 @@ export const UseMouse = /* #__PURE__ */ defineComponent<UseMouseOptions>({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseMouse',
+    props: [
+      'eventFilter',
+      'initialValue',
+      'resetOnTouchEnds',
+      'scroll',
+      'target',
+      'touch',
+      'type',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useMouseInElement/component.ts b/packages/core/useMouseInElement/component.ts
index 95c949f3c35..7203f6b73d0 100644
--- a/packages/core/useMouseInElement/component.ts
+++ b/packages/core/useMouseInElement/component.ts
@@ -1,12 +1,20 @@
-import type { MouseInElementOptions } from '@vueuse/core'
-import type { RenderableComponent } from '../types'
+import type { MouseInElementOptions, RenderableComponent, UseMouseInElementReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useMouseInElement } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseMouseInElement = /* #__PURE__ */ defineComponent<MouseInElementOptions & RenderableComponent>({
-  name: 'UseMouseElement',
-  props: ['handleOutside', 'as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseMouseInElementProps extends MouseInElementOptions, RenderableComponent {}
+interface UseMouseInElementSlots {
+  default: (data: Reactive<UseMouseInElementReturn>) => any
+}
+
+export const UseMouseInElement = /* #__PURE__ */ defineComponent<
+  UseMouseInElementProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseMouseInElementSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
     const data = reactive(useMouseInElement(target, props))
 
@@ -15,4 +23,21 @@ export const UseMouseInElement = /* #__PURE__ */ defineComponent<MouseInElementO
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseMouseInElement',
+    props: [
+      'as',
+      'eventFilter',
+      'handleOutside',
+      'initialValue',
+      'resetOnTouchEnds',
+      'scroll',
+      'target',
+      'touch',
+      'type',
+      'window',
+      'windowResize',
+      'windowScroll',
+    ],
+  },
+)
diff --git a/packages/core/useMouseInElement/directive.ts b/packages/core/useMouseInElement/directive.ts
index 5884dd0df3b..485ec051e99 100644
--- a/packages/core/useMouseInElement/directive.ts
+++ b/packages/core/useMouseInElement/directive.ts
@@ -1,8 +1,8 @@
+import type { MouseInElementOptions, UseMouseInElementReturn } from '@vueuse/core'
 import type { ObjectDirective, Reactive } from 'vue'
-import type { MouseInElementOptions, UseMouseInElementReturn } from './index'
+import { useMouseInElement } from '@vueuse/core'
 import { reactiveOmit } from '@vueuse/shared'
 import { reactive, watch } from 'vue'
-import { useMouseInElement } from './index'
 
 type MouseInElement = Omit<UseMouseInElementReturn, 'stop'>
 type BindingValueFunction = (mouse: Reactive<MouseInElement>) => void
diff --git a/packages/core/useMousePressed/component.ts b/packages/core/useMousePressed/component.ts
index caa60abd9d0..128268eba8f 100644
--- a/packages/core/useMousePressed/component.ts
+++ b/packages/core/useMousePressed/component.ts
@@ -1,12 +1,20 @@
-import type { MousePressedOptions } from '@vueuse/core'
-import type { RenderableComponent } from '../types'
+import type { MousePressedOptions, RenderableComponent, UseMousePressedReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useMousePressed } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseMousePressed = /* #__PURE__ */ defineComponent<Omit<MousePressedOptions, 'target'> & RenderableComponent>({
-  name: 'UseMousePressed',
-  props: ['touch', 'initialValue', 'as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseMousePressedProps extends Omit<MousePressedOptions, 'target'>, RenderableComponent {}
+interface UseMousePressedSlots {
+  default: (data: Reactive<UseMousePressedReturn>) => any
+}
+
+export const UseMousePressed = /* #__PURE__ */ defineComponent<
+  UseMousePressedProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseMousePressedSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
     const data = reactive(useMousePressed({ ...props, target }))
 
@@ -15,4 +23,17 @@ export const UseMousePressed = /* #__PURE__ */ defineComponent<Omit<MousePressed
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseMousePressed',
+    props: [
+      'as',
+      'capture',
+      'drag',
+      'initialValue',
+      'onPressed',
+      'onReleased',
+      'touch',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/useNetwork/component.ts b/packages/core/useNetwork/component.ts
index 1faf3ad0d6d..9265ef80208 100644
--- a/packages/core/useNetwork/component.ts
+++ b/packages/core/useNetwork/component.ts
@@ -1,14 +1,29 @@
+import type { ConfigurableWindow, UseNetworkReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useNetwork } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseNetwork = /* #__PURE__ */ defineComponent({
-  name: 'UseNetwork',
-  setup(props, { slots }) {
-    const data = reactive(useNetwork())
+export interface UseNetworkProps extends ConfigurableWindow {}
+interface UseNetworkSlots {
+  default: (data: Reactive<UseNetworkReturn>) => any
+}
+
+export const UseNetwork = /* #__PURE__ */ defineComponent<
+  UseNetworkProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseNetworkSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useNetwork(props))
 
     return () => {
       if (slots.default)
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseNetwork',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useNow/component.ts b/packages/core/useNow/component.ts
index c7e0be9095b..931e621d8de 100644
--- a/packages/core/useNow/component.ts
+++ b/packages/core/useNow/component.ts
@@ -1,11 +1,20 @@
-import type { UseNowOptions } from '@vueuse/core'
+import type { UseNowOptions, UseNowReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useNow } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseNow = /* #__PURE__ */ defineComponent<Omit<UseNowOptions<true>, 'controls'>>({
-  name: 'UseNow',
-  props: ['interval'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseNowProps extends Omit<UseNowOptions<true>, 'controls'> {}
+interface UseNowSlots {
+  default: (data: Reactive<UseNowReturn>) => any
+}
+
+export const UseNow = /* #__PURE__ */ defineComponent<
+  UseNowProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseNowSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useNow({ ...props, controls: true }))
 
     return () => {
@@ -13,4 +22,11 @@ export const UseNow = /* #__PURE__ */ defineComponent<Omit<UseNowOptions<true>,
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseNow',
+    props: [
+      'immediate',
+      'interval',
+    ],
+  },
+)
diff --git a/packages/core/useObjectUrl/component.ts b/packages/core/useObjectUrl/component.ts
index eff3c967657..3536979464f 100644
--- a/packages/core/useObjectUrl/component.ts
+++ b/packages/core/useObjectUrl/component.ts
@@ -1,23 +1,32 @@
+import type { SlotsType } from 'vue'
 import { useObjectUrl } from '@vueuse/core'
-import { toRef } from '@vueuse/shared'
+import { toRefs } from '@vueuse/shared'
 import { defineComponent } from 'vue'
 
 export interface UseObjectUrlProps {
   object: Blob | MediaSource | undefined
 }
+interface UseObjectUrlSlots {
+  default: (data: Readonly<string | undefined>) => any
+}
 
-export const UseObjectUrl = /* #__PURE__ */ defineComponent<UseObjectUrlProps>({
-  name: 'UseObjectUrl',
-  props: [
-    'object',
-  ] as unknown as undefined,
-  setup(props, { slots }) {
-    const object = toRef(props, 'object')
+export const UseObjectUrl = /* #__PURE__ */ defineComponent<
+  UseObjectUrlProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseObjectUrlSlots>
+>(
+  (props, { slots }) => {
+    const { object } = toRefs(props)
     const url = useObjectUrl(object)
 
     return () => {
       if (slots.default && url.value)
-        return slots.default(url)
+        return slots.default(url.value)
     }
   },
-})
+  {
+    name: 'UseObjectUrl',
+    props: ['object'],
+  },
+)
diff --git a/packages/core/useOffsetPagination/component.ts b/packages/core/useOffsetPagination/component.ts
index 445e68de6de..1017fc63b94 100644
--- a/packages/core/useOffsetPagination/component.ts
+++ b/packages/core/useOffsetPagination/component.ts
@@ -1,25 +1,29 @@
-import type { UseOffsetPaginationOptions } from './index'
+import type { UseOffsetPaginationOptions, UseOffsetPaginationReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useOffsetPagination } from '@vueuse/core'
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, toValue } from 'vue'
 
-export const UseOffsetPagination = /* #__PURE__ */ defineComponent<UseOffsetPaginationOptions>({
-  name: 'UseOffsetPagination',
-  props: [
-    'total',
-    'page',
-    'pageSize',
-    'onPageChange',
-    'onPageSizeChange',
-    'onPageCountChange',
-  ] as unknown as undefined,
-  emits: [
-    'page-change',
-    'page-size-change',
-    'page-count-change',
-  ],
-  setup(props, { slots, emit }) {
+export interface UseOffsetPaginationProps extends UseOffsetPaginationOptions {}
+// eslint-disable-next-line ts/consistent-type-definitions
+export type UseOffsetPaginationEmits = {
+  'page-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageChange']>>) => void
+  'page-size-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageSizeChange']>>) => void
+  'page-count-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageCountChange']>>) => void
+}
+interface UseOffsetPaginationSlots {
+  default: (data: Reactive<UseOffsetPaginationReturn>) => any
+}
+
+export const UseOffsetPagination = /* #__PURE__ */ defineComponent<
+  UseOffsetPaginationProps,
+  UseOffsetPaginationEmits,
+  string,
+  SlotsType<UseOffsetPaginationSlots>
+>(
+  (props, { slots, emit }) => {
     const data = reactive(useOffsetPagination({
       ...props,
+      total: toValue(props.total) || undefined,
       onPageChange(...args) {
         props.onPageChange?.(...args)
         emit('page-change', ...args)
@@ -39,4 +43,15 @@ export const UseOffsetPagination = /* #__PURE__ */ defineComponent<UseOffsetPagi
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseOffsetPagination',
+    props: [
+      'onPageChange',
+      'onPageCountChange',
+      'onPageSizeChange',
+      'page',
+      'pageSize',
+      'total',
+    ],
+  },
+)
diff --git a/packages/core/useOnline/component.ts b/packages/core/useOnline/component.ts
index d75dc43fd4e..e31f097e8ca 100644
--- a/packages/core/useOnline/component.ts
+++ b/packages/core/useOnline/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow, UseNetworkReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useOnline } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseOnline = /* #__PURE__ */ defineComponent({
-  name: 'UseOnline',
-  setup(props, { slots }) {
+export interface UseOnlineProps extends ConfigurableWindow {}
+interface UseOnlineSlots {
+  default: (data: Reactive<{
+    isOnline: UseNetworkReturn['isOnline']
+  }>) => any
+}
+
+export const UseOnline = /* #__PURE__ */ defineComponent<
+  UseOnlineProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseOnlineSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      isOnline: useOnline(),
+      isOnline: useOnline(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UseOnline = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseOnline',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePageLeave/component.ts b/packages/core/usePageLeave/component.ts
index 26ffad5c980..4ecaec8c0fe 100644
--- a/packages/core/usePageLeave/component.ts
+++ b/packages/core/usePageLeave/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow, UsePageLeaveReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { usePageLeave } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePageLeave = /* #__PURE__ */ defineComponent({
-  name: 'UsePageLeave',
-  setup(props, { slots }) {
+export interface UsePageLeaveProps extends ConfigurableWindow {}
+interface UsePageLeaveSlots {
+  default: (data: Reactive<{
+    isLeft: UsePageLeaveReturn
+  }>) => any
+}
+
+export const UsePageLeave = /* #__PURE__ */ defineComponent<
+  UsePageLeaveProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePageLeaveSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      isLeft: usePageLeave(),
+      isLeft: usePageLeave(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePageLeave = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePageLeave',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePageLeave/index.ts b/packages/core/usePageLeave/index.ts
index 6c51bd83149..bc32f994f56 100644
--- a/packages/core/usePageLeave/index.ts
+++ b/packages/core/usePageLeave/index.ts
@@ -34,3 +34,5 @@ export function usePageLeave(options: ConfigurableWindow = {}) {
 
   return isLeft
 }
+
+export type UsePageLeaveReturn = ReturnType<typeof usePageLeave>
diff --git a/packages/core/usePointer/component.ts b/packages/core/usePointer/component.ts
index c1ba032db70..a1affd1da16 100644
--- a/packages/core/usePointer/component.ts
+++ b/packages/core/usePointer/component.ts
@@ -1,16 +1,22 @@
-import type { UsePointerOptions } from '@vueuse/core'
-import { usePointer } from '@vueuse/core'
+import type { UsePointerOptions, UsePointerReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
+import { defaultWindow, usePointer } from '@vueuse/core'
 import { defineComponent, reactive, shallowRef } from 'vue'
-import { defaultWindow } from '../_configurable'
 
-export const UsePointer = /* #__PURE__ */ defineComponent<Omit<UsePointerOptions, 'target'> & { target: 'window' | 'self' }>({
-  name: 'UsePointer',
-  props: [
-    'pointerTypes',
-    'initialValue',
-    'target',
-  ] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UsePointerProps extends Omit<UsePointerOptions, 'target'> {
+  target?: 'window' | 'self'
+}
+interface UsePointerSlots {
+  default: (data: Reactive<UsePointerReturn>) => any
+}
+
+export const UsePointer = /* #__PURE__ */ defineComponent<
+  UsePointerProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePointerSlots>
+>(
+  (props, { slots }) => {
     const el = shallowRef<HTMLElement | null>(null)
 
     const data = reactive(usePointer({
@@ -20,7 +26,16 @@ export const UsePointer = /* #__PURE__ */ defineComponent<Omit<UsePointerOptions
 
     return () => {
       if (slots.default)
-        return slots.default(data, { ref: el })
+        return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePointer',
+    props: [
+      'initialValue',
+      'pointerTypes',
+      'target',
+      'window',
+    ],
+  },
+)
diff --git a/packages/core/usePointerLock/component.ts b/packages/core/usePointerLock/component.ts
index 670a2ca6c2a..80d8850b208 100644
--- a/packages/core/usePointerLock/component.ts
+++ b/packages/core/usePointerLock/component.ts
@@ -1,11 +1,20 @@
-import type { RenderableComponent } from '../types'
+import type { RenderableComponent, UsePointerLockOptions, UsePointerLockReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { usePointerLock } from '@vueuse/core'
 import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UsePointerLock = defineComponent<RenderableComponent>({
-  name: 'UsePointerLock',
-  props: ['as'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UsePointerLockProps extends RenderableComponent, UsePointerLockOptions {}
+interface UsePointerLockSlots {
+  default: (data: Reactive<UsePointerLockReturn>) => any
+}
+
+export const UsePointerLock = /* #__PURE__ */ defineComponent<
+  UsePointerLockProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePointerLockSlots>
+>(
+  (props, { slots }) => {
     const target = shallowRef<HTMLDivElement>()
     const data = reactive(usePointerLock(target))
 
@@ -14,4 +23,11 @@ export const UsePointerLock = defineComponent<RenderableComponent>({
         return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UsePointerLock',
+    props: [
+      'as',
+      'document',
+    ],
+  },
+)
diff --git a/packages/core/usePreferredColorScheme/component.ts b/packages/core/usePreferredColorScheme/component.ts
index dd89b6098ad..41e85241530 100644
--- a/packages/core/usePreferredColorScheme/component.ts
+++ b/packages/core/usePreferredColorScheme/component.ts
@@ -1,11 +1,24 @@
+import type { ColorSchemeType, ConfigurableWindow } from '@vueuse/core'
+import type { ComputedRef, Reactive, SlotsType } from 'vue'
 import { usePreferredColorScheme } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePreferredColorScheme = /* #__PURE__ */ defineComponent({
-  name: 'UsePreferredColorScheme',
-  setup(props, { slots }) {
+export interface UsePreferredColorSchemeProps extends ConfigurableWindow {}
+interface UsePreferredColorSchemeSlots {
+  default: (data: Reactive<{
+    colorScheme: ComputedRef<ColorSchemeType>
+  }>) => any
+}
+
+export const UsePreferredColorScheme = /* #__PURE__ */ defineComponent<
+  UsePreferredColorSchemeProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePreferredColorSchemeSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      colorScheme: usePreferredColorScheme(),
+      colorScheme: usePreferredColorScheme(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePreferredColorScheme = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePreferredColorScheme',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePreferredContrast/component.ts b/packages/core/usePreferredContrast/component.ts
index e3483fba8cc..c232eeafada 100644
--- a/packages/core/usePreferredContrast/component.ts
+++ b/packages/core/usePreferredContrast/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow, ContrastType } from '@vueuse/core'
+import type { ComputedRef, Reactive, SlotsType } from 'vue'
 import { usePreferredContrast } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePreferredContrast = /* #__PURE__ */ defineComponent({
-  name: 'UsePreferredContrast',
-  setup(props, { slots }) {
+export interface UsePreferredContrastProps extends ConfigurableWindow {}
+interface UsePreferredContrastSlots {
+  default: (data: Reactive<{
+    contrast: ComputedRef<ContrastType>
+  }>) => any
+}
+
+export const UsePreferredContrast = /* #__PURE__ */ defineComponent<
+  UsePreferredContrastProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePreferredContrastSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      contrast: usePreferredContrast(),
+      contrast: usePreferredContrast(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePreferredContrast = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePreferredContrast',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePreferredDark/component.ts b/packages/core/usePreferredDark/component.ts
index cdf5e1f1e09..568df60abb2 100644
--- a/packages/core/usePreferredDark/component.ts
+++ b/packages/core/usePreferredDark/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow } from '@vueuse/core'
+import type { ComputedRef, Reactive, SlotsType } from 'vue'
 import { usePreferredDark } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePreferredDark = /* #__PURE__ */ defineComponent({
-  name: 'UsePreferredDark',
-  setup(props, { slots }) {
+export interface UsePreferredDarkProps extends ConfigurableWindow {}
+interface UsePreferredDarkSlots {
+  default: (data: Reactive<{
+    prefersDark: ComputedRef<boolean>
+  }>) => any
+}
+
+export const UsePreferredDark = /* #__PURE__ */ defineComponent<
+  UsePreferredDarkProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePreferredDarkSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      prefersDark: usePreferredDark(),
+      prefersDark: usePreferredDark(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePreferredDark = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePreferredDark',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePreferredLanguages/component.ts b/packages/core/usePreferredLanguages/component.ts
index daf795304b4..fec025b683a 100644
--- a/packages/core/usePreferredLanguages/component.ts
+++ b/packages/core/usePreferredLanguages/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow } from '@vueuse/core'
+import type { Reactive, Ref, SlotsType } from 'vue'
 import { usePreferredLanguages } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePreferredLanguages = /* #__PURE__ */ defineComponent({
-  name: 'UsePreferredLanguages',
-  setup(props, { slots }) {
+export interface UsePreferredLanguagesProps extends ConfigurableWindow {}
+interface UsePreferredLanguagesSlots {
+  default: (data: Reactive<{
+    languages: Ref<readonly string[]>
+  }>) => any
+}
+
+export const UsePreferredLanguages = /* #__PURE__ */ defineComponent<
+  UsePreferredLanguagesProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePreferredLanguagesSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      languages: usePreferredLanguages(),
+      languages: usePreferredLanguages(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePreferredLanguages = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePreferredLanguages',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/usePreferredReducedMotion/component.ts b/packages/core/usePreferredReducedMotion/component.ts
index 4af36bb54c7..57fada8175f 100644
--- a/packages/core/usePreferredReducedMotion/component.ts
+++ b/packages/core/usePreferredReducedMotion/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow, ReducedMotionType } from '@vueuse/core'
+import type { ComputedRef, Reactive, SlotsType } from 'vue'
 import { usePreferredReducedMotion } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UsePreferredReducedMotion = /* #__PURE__ */ defineComponent({
-  name: 'UsePreferredReducedMotion',
-  setup(props, { slots }) {
+export interface UsePreferredReducedMotionProps extends ConfigurableWindow {}
+interface UsePreferredReducedMotionSlots {
+  default: (data: Reactive<{
+    motion: ComputedRef<ReducedMotionType>
+  }>) => any
+}
+
+export const UsePreferredReducedMotion = /* #__PURE__ */ defineComponent<
+  UsePreferredReducedMotionProps,
+  Record<string, never>,
+  string,
+  SlotsType<UsePreferredReducedMotionSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      motion: usePreferredReducedMotion(),
+      motion: usePreferredReducedMotion(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UsePreferredReducedMotion = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UsePreferredReducedMotion',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useResizeObserver/directive.ts b/packages/core/useResizeObserver/directive.ts
index 997ccfd30b7..8d0684a08d9 100644
--- a/packages/core/useResizeObserver/directive.ts
+++ b/packages/core/useResizeObserver/directive.ts
@@ -1,6 +1,6 @@
+import type { ResizeObserverCallback, UseResizeObserverOptions } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { ResizeObserverCallback, UseResizeObserverOptions } from './index'
-import { useResizeObserver } from './index'
+import { useResizeObserver } from '@vueuse/core'
 
 type BindingValueFunction = ResizeObserverCallback
 
diff --git a/packages/core/useScreenSafeArea/component.ts b/packages/core/useScreenSafeArea/component.ts
index a87495e2585..f1986f55970 100644
--- a/packages/core/useScreenSafeArea/component.ts
+++ b/packages/core/useScreenSafeArea/component.ts
@@ -1,37 +1,52 @@
-import { defineComponent, h } from 'vue'
-import { useScreenSafeArea } from './index'
+import type { RenderableComponent, UseScreenSafeAreaReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
+import { useScreenSafeArea } from '@vueuse/core'
+import { defineComponent, h, reactive } from 'vue'
 
-export const UseScreenSafeArea = /* #__PURE__ */ defineComponent({
-  name: 'UseScreenSafeArea',
-  props: {
-    top: Boolean,
-    right: Boolean,
-    bottom: Boolean,
-    left: Boolean,
-  },
-  setup(props, { slots }) {
-    const {
-      top,
-      right,
-      bottom,
-      left,
-    } = useScreenSafeArea()
+export interface UseScreenSafeAreaProps extends RenderableComponent {
+  top?: boolean
+  right?: boolean
+  bottom?: boolean
+  left?: boolean
+}
+
+interface UseScreenSafeAreaSlots {
+  default: (data: Reactive<UseScreenSafeAreaReturn>) => any
+}
+
+export const UseScreenSafeArea = /* #__PURE__ */ defineComponent<
+  UseScreenSafeAreaProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseScreenSafeAreaSlots>
+>(
+  (props, { slots }) => {
+    const data = reactive(useScreenSafeArea())
 
     return () => {
       if (slots.default) {
-        return h('div', {
+        return h(props.as || 'div', {
           style: {
-            paddingTop: props.top ? top.value : '',
-            paddingRight: props.right ? right.value : '',
-            paddingBottom: props.bottom ? bottom.value : '',
-            paddingLeft: props.left ? left.value : '',
+            paddingTop: props.top ? data.top : '',
+            paddingRight: props.right ? data.right : '',
+            paddingBottom: props.bottom ? data.bottom : '',
+            paddingLeft: props.left ? data.left : '',
             boxSizing: 'border-box',
             maxHeight: '100vh',
             maxWidth: '100vw',
             overflow: 'auto',
           },
-        }, slots.default())
+        }, slots.default(data))
       }
     }
   },
-})
+  {
+    name: 'UseScreenSafeArea',
+    props: [
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ],
+  },
+)
diff --git a/packages/core/useScreenSafeArea/index.ts b/packages/core/useScreenSafeArea/index.ts
index 731ed4072da..b3ca786f942 100644
--- a/packages/core/useScreenSafeArea/index.ts
+++ b/packages/core/useScreenSafeArea/index.ts
@@ -56,3 +56,5 @@ type VarName = '--vueuse-safe-area-top' | '--vueuse-safe-area-right' | '--vueuse
 function getValue(position: VarName) {
   return getComputedStyle(document.documentElement).getPropertyValue(position)
 }
+
+export type UseScreenSafeAreaReturn = ReturnType<typeof useScreenSafeArea>
diff --git a/packages/core/useScroll/directive.ts b/packages/core/useScroll/directive.ts
index 1624be1337d..2b86c1efd70 100644
--- a/packages/core/useScroll/directive.ts
+++ b/packages/core/useScroll/directive.ts
@@ -1,6 +1,6 @@
+import type { UseScrollOptions, UseScrollReturn } from '@vueuse/core'
 import type { ObjectDirective } from 'vue'
-import type { UseScrollOptions, UseScrollReturn } from './index'
-import { useScroll } from './index'
+import { useScroll } from '@vueuse/core'
 
 type BindingValueFunction = (state: UseScrollReturn) => void
 
diff --git a/packages/core/useScrollLock/directive.ts b/packages/core/useScrollLock/directive.ts
index d083b67a4bc..38b9f81917f 100644
--- a/packages/core/useScrollLock/directive.ts
+++ b/packages/core/useScrollLock/directive.ts
@@ -1,6 +1,6 @@
 import type { FunctionDirective } from 'vue'
+import { useScrollLock } from '@vueuse/core'
 import { shallowRef, watch } from 'vue'
-import { useScrollLock } from './index'
 
 function onScrollLock(): FunctionDirective<
   HTMLElement,
diff --git a/packages/core/useTimeAgo/component.ts b/packages/core/useTimeAgo/component.ts
index 552936cbc7c..f15eadce8bc 100644
--- a/packages/core/useTimeAgo/component.ts
+++ b/packages/core/useTimeAgo/component.ts
@@ -1,16 +1,22 @@
-import type { UseTimeAgoOptions } from '@vueuse/core'
-import type { MaybeRef } from 'vue'
+import type { UseTimeAgoOptions, UseTimeAgoReturn } from '@vueuse/core'
+import type { MaybeRef, Reactive, SlotsType } from 'vue'
 import { useTimeAgo } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
+export interface UseTimeAgoProps extends Omit<UseTimeAgoOptions<true>, 'controls'> {
   time: MaybeRef<Date | number | string>
 }
+interface UseTimeAgoSlots {
+  default: (data: Reactive<UseTimeAgoReturn<true>>) => any
+}
 
-export const UseTimeAgo = /* #__PURE__ */ defineComponent<UseTimeAgoComponentOptions>({
-  name: 'UseTimeAgo',
-  props: ['time', 'updateInterval', 'max', 'fullDateFormatter', 'messages', 'showSecond'] as unknown as undefined,
-  setup(props, { slots }) {
+export const UseTimeAgo = /* #__PURE__ */ defineComponent<
+  UseTimeAgoProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseTimeAgoSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useTimeAgo(() => props.time as number, { ...props, controls: true }))
 
     return () => {
@@ -18,4 +24,17 @@ export const UseTimeAgo = /* #__PURE__ */ defineComponent<UseTimeAgoComponentOpt
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseTimeAgo',
+    props: [
+      'fullDateFormatter',
+      'max',
+      'messages',
+      'rounding',
+      'showSecond',
+      'time',
+      'units',
+      'updateInterval',
+    ],
+  },
+)
diff --git a/packages/core/useTimestamp/component.ts b/packages/core/useTimestamp/component.ts
index faabeda2311..c3733dc53e8 100644
--- a/packages/core/useTimestamp/component.ts
+++ b/packages/core/useTimestamp/component.ts
@@ -1,11 +1,20 @@
-import type { UseTimestampOptions } from '@vueuse/core'
+import type { UseTimestampOptions, UseTimestampReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useTimestamp } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseTimestamp = /* #__PURE__ */ defineComponent<Omit<UseTimestampOptions<true>, 'controls'>>({
-  name: 'UseTimestamp',
-  props: ['immediate', 'interval', 'offset'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseTimestampProps extends Omit<UseTimestampOptions<true>, 'controls'> {}
+interface UseTimestampSlots {
+  default: (data: Reactive<UseTimestampReturn>) => any
+}
+
+export const UseTimestamp = /* #__PURE__ */ defineComponent<
+  UseTimestampProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseTimestampSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useTimestamp({ ...props, controls: true }))
 
     return () => {
@@ -13,4 +22,13 @@ export const UseTimestamp = /* #__PURE__ */ defineComponent<Omit<UseTimestampOpt
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseTimestamp',
+    props: [
+      'callback',
+      'immediate',
+      'interval',
+      'offset',
+    ],
+  },
+)
diff --git a/packages/core/useVirtualList/component.ts b/packages/core/useVirtualList/component.ts
index 19c187a3c65..d0ae4853c82 100644
--- a/packages/core/useVirtualList/component.ts
+++ b/packages/core/useVirtualList/component.ts
@@ -23,14 +23,8 @@ export interface UseVirtualListProps {
   height: string
 }
 
-export const UseVirtualList = /* #__PURE__ */ defineComponent<UseVirtualListProps>({
-  name: 'UseVirtualList',
-  props: [
-    'list',
-    'options',
-    'height',
-  ] as unknown as undefined,
-  setup(props, { slots, expose }) {
+export const UseVirtualList = /* #__PURE__ */ defineComponent<UseVirtualListProps>(
+  (props, { slots, expose }) => {
     const { list: listRef } = toRefs(props)
 
     const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(listRef, props.options)
@@ -43,4 +37,12 @@ export const UseVirtualList = /* #__PURE__ */ defineComponent<UseVirtualListProp
       h('div', { ...wrapperProps.value }, list.value.map((item: any) => h('div', { style: { overflow: 'hidden', height: item.height } }, slots.default ? slots.default(item) : 'Please set content!'))),
     ])
   },
-})
+  {
+    name: 'UseVirtualList',
+    props: [
+      'height',
+      'list',
+      'options',
+    ],
+  },
+)
diff --git a/packages/core/useWindowFocus/component.ts b/packages/core/useWindowFocus/component.ts
index ab15010a98a..496d87dbbb7 100644
--- a/packages/core/useWindowFocus/component.ts
+++ b/packages/core/useWindowFocus/component.ts
@@ -1,11 +1,24 @@
+import type { ConfigurableWindow } from '@vueuse/core'
+import type { Reactive, ShallowRef, SlotsType } from 'vue'
 import { useWindowFocus } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseWindowFocus = /* #__PURE__ */ defineComponent({
-  name: 'UseWindowFocus',
-  setup(props, { slots }) {
+export interface UseWindowFocusProps extends ConfigurableWindow {}
+interface UseWindowFocusSlots {
+  default: (data: Reactive<{
+    focused: ShallowRef<boolean>
+  }>) => any
+}
+
+export const UseWindowFocus = /* #__PURE__ */ defineComponent<
+  UseWindowFocusProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseWindowFocusSlots>
+>(
+  (props, { slots }) => {
     const data = reactive({
-      focused: useWindowFocus(),
+      focused: useWindowFocus(props),
     })
 
     return () => {
@@ -13,4 +26,8 @@ export const UseWindowFocus = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseWindowFocus',
+    props: ['window'],
+  },
+)
diff --git a/packages/core/useWindowSize/component.ts b/packages/core/useWindowSize/component.ts
index 9d32ba6bed8..3e344d71896 100644
--- a/packages/core/useWindowSize/component.ts
+++ b/packages/core/useWindowSize/component.ts
@@ -1,11 +1,20 @@
-import type { UseWindowSizeOptions } from '@vueuse/core'
+import type { UseWindowSizeOptions, UseWindowSizeReturn } from '@vueuse/core'
+import type { Reactive, SlotsType } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { defineComponent, reactive } from 'vue'
 
-export const UseWindowSize = /* #__PURE__ */ defineComponent<UseWindowSizeOptions>({
-  name: 'UseWindowSize',
-  props: ['initialWidth', 'initialHeight'] as unknown as undefined,
-  setup(props, { slots }) {
+export interface UseWindowSizeProps extends UseWindowSizeOptions {}
+interface UseWindowSizeSlots {
+  default: (data: Reactive<UseWindowSizeReturn>) => any
+}
+
+export const UseWindowSize = /* #__PURE__ */ defineComponent<
+  UseWindowSizeProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseWindowSizeSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useWindowSize(props))
 
     return () => {
@@ -13,4 +22,15 @@ export const UseWindowSize = /* #__PURE__ */ defineComponent<UseWindowSizeOption
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseWindowSize',
+    props: [
+      'includeScrollbar',
+      'initialHeight',
+      'initialWidth',
+      'listenOrientation',
+      'type',
+      'window',
+    ],
+  },
+)
diff --git a/packages/integrations/useAsyncValidator/component.ts b/packages/integrations/useAsyncValidator/component.ts
index 7a2f62aea38..6d093ebefd3 100644
--- a/packages/integrations/useAsyncValidator/component.ts
+++ b/packages/integrations/useAsyncValidator/component.ts
@@ -1,21 +1,25 @@
+import type { UseAsyncValidatorOptions, UseAsyncValidatorReturn } from '@vueuse/integrations/useAsyncValidator'
 import type { Rules } from 'async-validator'
-import type { PropType } from 'vue'
+import type { Reactive, SlotsType } from 'vue'
+import { useAsyncValidator } from '@vueuse/integrations/useAsyncValidator'
 import { defineComponent, reactive } from 'vue'
-import { useAsyncValidator } from './index'
 
-export const UseAsyncValidator = /* #__PURE__ */ defineComponent({
-  name: 'UseAsyncValidator',
-  props: {
-    form: {
-      type: Object as PropType<Record<string, any>>,
-      required: true,
-    },
-    rules: {
-      type: Object as PropType<Rules>,
-      required: true,
-    },
-  },
-  setup(props, { slots }) {
+export interface UseAsyncValidatorProps {
+  form: Record<string, any>
+  rules: Rules
+  options?: UseAsyncValidatorOptions
+}
+interface UseAsyncValidatorSlots {
+  default: (data: Reactive<UseAsyncValidatorReturn>) => any
+}
+
+export const UseAsyncValidator = /* #__PURE__ */ defineComponent<
+  UseAsyncValidatorProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseAsyncValidatorSlots>
+>(
+  (props, { slots }) => {
     const data = reactive(useAsyncValidator(props.form, props.rules))
 
     return () => {
@@ -23,4 +27,12 @@ export const UseAsyncValidator = /* #__PURE__ */ defineComponent({
         return slots.default(data)
     }
   },
-})
+  {
+    name: 'UseAsyncValidator',
+    props: [
+      'form',
+      'options',
+      'rules',
+    ],
+  },
+)
diff --git a/packages/integrations/useFocusTrap/component.ts b/packages/integrations/useFocusTrap/component.ts
index c0850fd608c..61a03adcc04 100644
--- a/packages/integrations/useFocusTrap/component.ts
+++ b/packages/integrations/useFocusTrap/component.ts
@@ -1,40 +1,38 @@
 import type { RenderableComponent } from '@vueuse/core'
-import type { FocusTrap } from 'focus-trap'
-import type { UseFocusTrapOptions } from './index'
-import { unrefElement } from '@vueuse/core'
-import { createFocusTrap } from 'focus-trap'
-import { ref as deepRef, defineComponent, h, onScopeDispose, watch } from 'vue'
+import type { UseFocusTrapOptions, UseFocusTrapReturn } from '@vueuse/integrations/useFocusTrap'
+import type { Reactive, SlotsType } from 'vue'
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export interface ComponentUseFocusTrapOptions extends RenderableComponent {
+export interface UseFocusTrapProps extends RenderableComponent {
   options?: UseFocusTrapOptions
 }
+/**
+ * @deprecated
+ */
+export interface ComponentUseFocusTrapOptions extends UseFocusTrapProps {}
 
-export const UseFocusTrap = /* #__PURE__ */ defineComponent <ComponentUseFocusTrapOptions> ({
-  name: 'UseFocusTrap',
-  props: ['as', 'options'] as unknown as undefined,
-  setup(props, { slots }) {
-    let trap: undefined | FocusTrap
-    const target = deepRef()
-
-    const activate = () => trap && trap.activate()
-    const deactivate = () => trap && trap.deactivate()
-    watch(
-      () => unrefElement(target),
-      (el) => {
-        if (!el)
-          return
-        trap = createFocusTrap(el, props.options || {})
-        activate()
-      },
-      { flush: 'post' },
-    )
+interface UseFocusTrapSlots {
+  default: (data: Reactive<UseFocusTrapReturn>) => any
+}
 
-    // Cleanup on unmount
-    onScopeDispose(() => deactivate())
+export const UseFocusTrap = /* #__PURE__ */ defineComponent<
+  UseFocusTrapProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseFocusTrapSlots>
+>(
+  (props, { slots }) => {
+    const target = shallowRef<HTMLElement>()
+    const data = reactive(useFocusTrap(target, props.options))
 
     return () => {
       if (slots.default)
-        return h(props.as || 'div', { ref: target }, slots.default())
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseFocusTrap',
+    props: ['as', 'options'],
+  },
+)
diff --git a/packages/integrations/useSortable/component.ts b/packages/integrations/useSortable/component.ts
index f330876de85..e461372f945 100644
--- a/packages/integrations/useSortable/component.ts
+++ b/packages/integrations/useSortable/component.ts
@@ -1,33 +1,39 @@
-import type { PropType } from 'vue'
-import type { UseSortableOptions } from './index'
+import type { RenderableComponent } from '@vueuse/core'
+import type { UseSortableOptions, UseSortableReturn } from '@vueuse/integrations/useSortable'
+import type { Reactive, SlotsType } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { ref as deepRef, defineComponent, h, reactive } from 'vue'
-import { useSortable } from './index'
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { defineComponent, h, reactive, shallowRef } from 'vue'
 
-export const UseSortable = /* #__PURE__ */ defineComponent({
-  name: 'UseSortable',
-  props: {
-    modelValue: {
-      type: Array as PropType<any[]>,
-      required: true,
-    },
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    options: {
-      type: Object as PropType<UseSortableOptions>,
-      required: true,
-    },
-  },
+export interface UseSortableProps extends RenderableComponent {
+  modelValue: any[]
+  options?: UseSortableOptions
+}
+interface UseSortableSlots {
+  default: (data: Reactive<UseSortableReturn>) => any
+}
 
-  setup(props, { slots }) {
+export const UseSortable = /* #__PURE__ */ defineComponent<
+  UseSortableProps,
+  Record<string, never>,
+  string,
+  SlotsType<UseSortableSlots>
+>(
+  (props, { slots }) => {
     const list = useVModel(props, 'modelValue')
-    const target = deepRef()
+    const target = shallowRef<HTMLElement>()
     const data = reactive(useSortable(target, list, props.options))
     return () => {
       if (slots.default)
-        return h(props.tag, { ref: target }, slots.default(data))
+        return h(props.as || 'div', { ref: target }, slots.default(data))
     }
   },
-})
+  {
+    name: 'UseSortable',
+    props: [
+      'as',
+      'modelValue',
+      'options',
+    ],
+  },
+)
diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts
index 4d933d067ea..3b7bdd093eb 100644
--- a/packages/shared/useToggle/index.ts
+++ b/packages/shared/useToggle/index.ts
@@ -1,7 +1,7 @@
 import type { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
 import { isRef, shallowRef, toValue } from 'vue'
 
-type ToggleFn = (value?: boolean) => void
+export type ToggleFn = (value?: boolean) => void
 
 export type UseToggleReturn = [ShallowRef<boolean>, ToggleFn] | ToggleFn