diff --git a/example/main.tsx b/example/main.tsx
index f448a08..fe20ad0 100644
--- a/example/main.tsx
+++ b/example/main.tsx
@@ -1,17 +1,7 @@
 import '@abraham/reflection'
 import 'ant-design-vue/dist/reset.css'
-import {
-  Component,
-  type ComponentProps,
-  Hook,
-  injectService,
-  Link,
-  mergeRefs,
-  Mut,
-  provideService,
-  VueComponent,
-} from 'vue3-oop'
-import { createApp, defineComponent, ref, shallowRef } from 'vue'
+import { Component, Hook, Link, mergeRefs, Mut, VueComponent } from 'vue3-oop'
+import { createApp, shallowRef } from 'vue'
 import { ConfigProvider, Layout, Menu } from 'ant-design-vue'
 import { RouterLink, RouterView } from 'vue-router'
 import { RouterStartService } from './router'
@@ -19,50 +9,10 @@ import { routes } from './router/routes'
 import zhCN from 'ant-design-vue/lib/locale/zh_CN'
 import { setup } from './setup'
 
-class AService {
-  height = ref(0)
-}
-
-const A1 = defineComponent(() => {
-  provideService(new AService())
-  return () => (
-    <div>
-      <A2></A2>
-    </div>
-  )
-})
-
-const A2 = defineComponent(() => {
-  const a = injectService(AService)
-  console.log(11111, a)
-  return () => <div>111 {a.height.value}</div>
-})
-
-interface ChildProps {
-  value?: string
-  'onUpdate:value'?: (val: string) => any
-}
-
-class Child extends VueComponent<ChildProps> {
-  static defaultProps: ComponentProps<ChildProps> = ['value', 'onUpdate:value']
-  @Hook('Mounted')
-  mounted() {
-    console.log('child mounted')
-  }
-  render() {
-    console.log('child render')
-    return <div>child</div>
-  }
-}
-
 @Component({
   providers: [RouterStartService],
 })
 class App extends VueComponent {
-  constructor(private a: RouterStartService) {
-    super()
-  }
-
   @Mut() collapsed = false
 
   cc = shallowRef()
@@ -93,11 +43,6 @@ class App extends VueComponent {
             >
               VUE 示例
             </h2>
-            <Child
-              ref={(value, refs) => {
-                console.log(value, refs)
-              }}
-            ></Child>
             <Menu theme={'dark'} mode={'inline'}>
               {routes.map((r) => {
                 return (
@@ -122,7 +67,6 @@ class App extends VueComponent {
           </Layout.Sider>
           <Layout.Content>
             <RouterView></RouterView>
-            <A1></A1>
           </Layout.Content>
         </Layout>
       </ConfigProvider>
diff --git a/example/module/basic/basic.module.tsx b/example/module/basic/basic.module.tsx
index f431db7..8f4b06d 100644
--- a/example/module/basic/basic.module.tsx
+++ b/example/module/basic/basic.module.tsx
@@ -14,7 +14,7 @@ export default class BasicModule extends VueComponent {
         {({ Component }: { Component: any }) => {
           return (
             <div>
-              <h2>111</h2>
+              <h2>Suspense容器</h2>
               <Suspense
                 v-slots={{
                   default: () => [Component],
diff --git a/example/module/basic/basic.router.ts b/example/module/basic/basic.router.ts
index b3c4e65..c4fa142 100644
--- a/example/module/basic/basic.router.ts
+++ b/example/module/basic/basic.router.ts
@@ -4,21 +4,21 @@ const routes: RouteRecordRaw = {
   path: '/basic',
   component: () => import('./basic.module'),
   meta: {
-    title: '基础功能',
+    title: '特色功能',
   },
   children: [
     {
-      path: '/basic/hello-world',
-      component: () => import('./hello-world/hello-world.view'),
+      path: '/basic/simple-component',
+      component: () => import('./simple-component/index.view'),
       meta: {
-        title: '加减',
+        title: '简单组件',
       },
     },
     {
-      path: '/basic/user-input',
+      path: '/basic/class-component',
       component: () => import('./user-input/user-input.view'),
       meta: {
-        title: '增删改查',
+        title: '类组件',
       },
     },
     {
@@ -28,6 +28,20 @@ const routes: RouteRecordRaw = {
         title: '高阶组件',
       },
     },
+    {
+      path: '/basic/service',
+      component: () => import('./hoc/hoc.view'),
+      meta: {
+        title: '简单服务',
+      },
+    },
+    {
+      path: '/basic/inject',
+      component: () => import('./hoc/hoc.view'),
+      meta: {
+        title: '复杂服务注入',
+      },
+    },
   ],
 }
 
diff --git a/example/module/basic/simple-component/index.view.tsx b/example/module/basic/simple-component/index.view.tsx
new file mode 100644
index 0000000..b13e408
--- /dev/null
+++ b/example/module/basic/simple-component/index.view.tsx
@@ -0,0 +1,69 @@
+import { defineComponent, useClassAndStyle } from 'vue3-oop'
+import { AllowedComponentProps } from '@/type'
+import { ref } from 'vue'
+
+// region 函数组件
+export interface SimpleFuncComponentProps extends AllowedComponentProps {
+  count?: number
+}
+export function SimpleFuncComponent(props: SimpleFuncComponentProps) {
+  return <div>函数组件：{props.count}</div>
+}
+// endregion
+
+// region 状态带属性组件
+export interface SimpleStateComponentProps {
+  initialValue?: number
+}
+
+export const SimpleStateComponent = defineComponent(
+  function SimpleStateComponent(props: SimpleStateComponentProps) {
+    const classAndStyle = useClassAndStyle()
+    const count = ref(props.initialValue || 0)
+    return () => (
+      <div {...classAndStyle}>
+        <input type={'number'} v-model={count.value} />
+      </div>
+    )
+  },
+)
+
+export const SimpleStateWithDefaultValueComponent = defineComponent(
+  function SimpleStateWithDefaultValueComponent(
+    props: SimpleStateComponentProps,
+  ) {
+    const classAndStyle = useClassAndStyle()
+    const count = ref(props.initialValue || 0)
+    return () => (
+      <div {...classAndStyle}>
+        <h3>带默认属性参数的组件</h3>
+        <input type={'number'} v-model={count.value} />
+      </div>
+    )
+  },
+  {
+    props: {
+      initialValue: {
+        type: Number,
+        default: 20,
+      },
+    },
+  },
+)
+
+// endregion
+
+// 简单状态组件定义
+const SimpleComponent = defineComponent(() => {
+  return () => (
+    <div>
+      <h2>简单组件定义</h2>
+      <h3>函数组件</h3>
+      <SimpleFuncComponent count={20}></SimpleFuncComponent>
+      <SimpleStateComponent initialValue={10}></SimpleStateComponent>
+      <SimpleStateWithDefaultValueComponent></SimpleStateWithDefaultValueComponent>
+    </div>
+  )
+})
+
+export default SimpleComponent
diff --git a/package.json b/package.json
index ed6ab12..ed44b30 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "vite-tsconfig-paths": "^4.2.0",
     "vitepress": "1.0.0-rc.10",
     "vitest": "^0.34.3",
-    "vue": "^3.3.4",
+    "vue": "^3.5.13",
     "vue-router": "^4.2.4"
   },
   "commitlint": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3fea219..0004e50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,22 +43,22 @@ importers:
         version: 6.5.0(eslint@8.48.0)(typescript@5.2.2)
       '@vitejs/plugin-vue':
         specifier: ^4.3.4
-        version: 4.3.4(vite@4.4.9(@types/node@20.5.7)(sass@1.66.1))(vue@3.3.4)
+        version: 4.3.4(vite@4.4.9(@types/node@20.5.7)(sass@1.66.1))(vue@3.5.13(typescript@5.2.2))
       '@vitest/coverage-c8':
         specifier: ^0.33.0
-        version: 0.33.0(vitest@0.34.3(@vitest/ui@0.34.3)(happy-dom@10.11.1)(sass@1.66.1))
+        version: 0.33.0(vitest@0.34.3)
       '@vitest/ui':
         specifier: ^0.34.3
         version: 0.34.3(vitest@0.34.3)
       '@vue/test-utils':
         specifier: 2.4.1
-        version: 2.4.1(@vue/server-renderer@3.3.4(vue@3.3.4))(vue@3.3.4)
+        version: 2.4.1(@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.2.2)))(vue@3.5.13(typescript@5.2.2))
       '@vue3-oop/plugin-vue-jsx':
         specifier: ^1.4.6
         version: 1.4.6(typescript@5.2.2)
       ant-design-vue:
         specifier: ^4.0.1
-        version: 4.0.1(vue@3.3.4)
+        version: 4.0.1(vue@3.5.13(typescript@5.2.2))
       autobind-decorator:
         specifier: ^2.4.0
         version: 2.4.0
@@ -118,16 +118,16 @@ importers:
         version: 4.2.0(typescript@5.2.2)(vite@4.4.9(@types/node@20.5.7)(sass@1.66.1))
       vitepress:
         specifier: 1.0.0-rc.10
-        version: 1.0.0-rc.10(@algolia/client-search@4.19.1)(@types/node@20.5.7)(async-validator@4.2.5)(sass@1.66.1)(search-insights@2.7.0)
+        version: 1.0.0-rc.10(@algolia/client-search@4.19.1)(@types/node@20.5.7)(async-validator@4.2.5)(sass@1.66.1)(search-insights@2.7.0)(typescript@5.2.2)
       vitest:
         specifier: ^0.34.3
         version: 0.34.3(@vitest/ui@0.34.3)(happy-dom@10.11.1)(sass@1.66.1)
       vue:
-        specifier: ^3.3.4
-        version: 3.3.4
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.2.2)
       vue-router:
         specifier: ^4.2.4
-        version: 4.2.4(vue@3.3.4)
+        version: 4.2.4(vue@3.5.13(typescript@5.2.2))
 
 packages:
 
@@ -277,24 +277,12 @@ packages:
     resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.19.4':
-    resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.22.5':
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.19.1':
-    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.22.5':
-    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.25.7':
-    resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-option@7.21.0':
@@ -318,8 +306,8 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/parser@7.22.13':
-    resolution: {integrity: sha512-3l6+4YOvc9wx7VlCSw4yQfcBo01ECA8TicQfbnCPuCEpRQrf+gTUyGdxNw+pyTUyywp6JRD1w0YQs9TpBXYlkw==}
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -350,8 +338,8 @@ packages:
     resolution: {integrity: sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.22.11':
-    resolution: {integrity: sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==}
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
   '@bcoe/v8-coverage@0.2.3':
@@ -673,6 +661,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
   '@jridgewell/trace-mapping@0.3.17':
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
 
@@ -1020,17 +1011,17 @@ packages:
   '@vue/babel-plugin-jsx@1.1.1':
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
 
-  '@vue/compiler-core@3.3.4':
-    resolution: {integrity: sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==}
+  '@vue/compiler-core@3.5.13':
+    resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
-  '@vue/compiler-dom@3.3.4':
-    resolution: {integrity: sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==}
+  '@vue/compiler-dom@3.5.13':
+    resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
 
-  '@vue/compiler-sfc@3.3.4':
-    resolution: {integrity: sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==}
+  '@vue/compiler-sfc@3.5.13':
+    resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
-  '@vue/compiler-ssr@3.3.4':
-    resolution: {integrity: sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==}
+  '@vue/compiler-ssr@3.5.13':
+    resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
   '@vue/devtools-api@6.5.0':
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
@@ -1043,25 +1034,22 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity-transform@3.3.4':
-    resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
-
-  '@vue/reactivity@3.3.4':
-    resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
+  '@vue/reactivity@3.5.13':
+    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
-  '@vue/runtime-core@3.3.4':
-    resolution: {integrity: sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==}
+  '@vue/runtime-core@3.5.13':
+    resolution: {integrity: sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==}
 
-  '@vue/runtime-dom@3.3.4':
-    resolution: {integrity: sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==}
+  '@vue/runtime-dom@3.5.13':
+    resolution: {integrity: sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==}
 
-  '@vue/server-renderer@3.3.4':
-    resolution: {integrity: sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==}
+  '@vue/server-renderer@3.5.13':
+    resolution: {integrity: sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==}
     peerDependencies:
-      vue: 3.3.4
+      vue: 3.5.13
 
-  '@vue/shared@3.3.4':
-    resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
+  '@vue/shared@3.5.13':
+    resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
   '@vue/test-utils@2.4.1':
     resolution: {integrity: sha512-VO8nragneNzUZUah6kOjiFmD/gwRjUauG9DROh6oaOeFwX1cZRUNHhdeogE8635cISigXFTtGLUQWx5KCb0xeg==}
@@ -1619,6 +1607,9 @@ packages:
   csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
   dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -2760,6 +2751,9 @@ packages:
     resolution: {integrity: sha512-fSErXALFNsnowREYZ49XCdOHF8wOPWuFOGQrAhP7x5J/BqQv+B02cNsTykGpDgRVx43EKg++6ANmTaGTtW+hUA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  magic-string@0.30.13:
+    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
+
   magic-string@0.30.3:
     resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==}
     engines: {node: '>=12'}
@@ -2883,6 +2877,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanopop@2.3.0:
     resolution: {integrity: sha512-fzN+T2K7/Ah25XU02MJkPZ5q4Tj5FpjmIYq4rvoHX4yb16HzFdCO6JxFFn5Y/oBhQ8no8fUZavnyIv9/+xkBBw==}
 
@@ -3140,6 +3139,10 @@ packages:
     resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact@10.17.1:
     resolution: {integrity: sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==}
 
@@ -3473,6 +3476,10 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -3965,8 +3972,13 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
-  vue@3.3.4:
-    resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
+  vue@3.5.13:
+    resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
@@ -4212,11 +4224,11 @@ snapshots:
 
   '@ant-design/icons-svg@4.3.1': {}
 
-  '@ant-design/icons-vue@6.1.0(vue@3.3.4)':
+  '@ant-design/icons-vue@6.1.0(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.3.1
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
 
   '@babel/code-frame@7.21.4':
     dependencies:
@@ -4286,7 +4298,7 @@ snapshots:
       '@babel/helper-module-imports': 7.21.4
       '@babel/helper-simple-access': 7.20.2
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/helper-validator-identifier': 7.25.9
       '@babel/template': 7.20.7
       '@babel/traverse': 7.21.4
       '@babel/types': 7.21.4
@@ -4303,15 +4315,9 @@ snapshots:
     dependencies:
       '@babel/types': 7.21.4
 
-  '@babel/helper-string-parser@7.19.4': {}
+  '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-string-parser@7.22.5': {}
-
-  '@babel/helper-validator-identifier@7.19.1': {}
-
-  '@babel/helper-validator-identifier@7.22.5': {}
-
-  '@babel/helper-validator-identifier@7.25.7': {}
+  '@babel/helper-validator-identifier@7.25.9': {}
 
   '@babel/helper-validator-option@7.21.0': {}
 
@@ -4325,13 +4331,13 @@ snapshots:
 
   '@babel/highlight@7.18.6':
     dependencies:
-      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/helper-validator-identifier': 7.25.9
       chalk: 2.4.2
       js-tokens: 4.0.0
 
   '@babel/highlight@7.25.7':
     dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
+      '@babel/helper-validator-identifier': 7.25.9
       chalk: 2.4.2
       js-tokens: 4.0.0
       picocolors: 1.1.1
@@ -4340,9 +4346,9 @@ snapshots:
     dependencies:
       '@babel/types': 7.21.4
 
-  '@babel/parser@7.22.13':
+  '@babel/parser@7.26.2':
     dependencies:
-      '@babel/types': 7.22.11
+      '@babel/types': 7.26.0
 
   '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.21.4)':
     dependencies:
@@ -4361,7 +4367,7 @@ snapshots:
   '@babel/template@7.20.7':
     dependencies:
       '@babel/code-frame': 7.21.4
-      '@babel/parser': 7.21.4
+      '@babel/parser': 7.26.2
       '@babel/types': 7.21.4
 
   '@babel/traverse@7.21.4':
@@ -4372,7 +4378,7 @@ snapshots:
       '@babel/helper-function-name': 7.21.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.21.4
+      '@babel/parser': 7.26.2
       '@babel/types': 7.21.4
       debug: 4.3.4
       globals: 11.12.0
@@ -4381,15 +4387,14 @@ snapshots:
 
   '@babel/types@7.21.4':
     dependencies:
-      '@babel/helper-string-parser': 7.19.4
-      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
       to-fast-properties: 2.0.0
 
-  '@babel/types@7.22.11':
+  '@babel/types@7.26.0':
     dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
-      to-fast-properties: 2.0.0
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
 
   '@bcoe/v8-coverage@0.2.3': {}
 
@@ -4666,18 +4671,18 @@ snapshots:
   '@jridgewell/gen-mapping@0.1.1':
     dependencies:
       '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@jridgewell/gen-mapping@0.3.2':
     dependencies:
       '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.17
 
   '@jridgewell/gen-mapping@0.3.3':
     dependencies:
       '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.19
 
   '@jridgewell/resolve-uri@3.1.0': {}
@@ -4690,6 +4695,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
   '@jridgewell/trace-mapping@0.3.17':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
@@ -4698,12 +4705,12 @@ snapshots:
   '@jridgewell/trace-mapping@0.3.19':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@jridgewell/trace-mapping@0.3.9':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@ljharb/through@2.3.13':
     dependencies:
@@ -4847,7 +4854,7 @@ snapshots:
       fast-glob: 3.3.1
       is-glob: 4.0.3
       open: 9.1.0
-      picocolors: 1.0.0
+      picocolors: 1.1.1
       tslib: 2.6.2
 
   '@pnpm/config.env-replace@1.1.0': {}
@@ -5064,12 +5071,12 @@ snapshots:
       '@typescript-eslint/types': 6.5.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitejs/plugin-vue@4.3.4(vite@4.4.9(@types/node@20.5.7)(sass@1.66.1))(vue@3.3.4)':
+  '@vitejs/plugin-vue@4.3.4(vite@4.4.9(@types/node@20.5.7)(sass@1.66.1))(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       vite: 4.4.9(@types/node@20.5.7)(sass@1.66.1)
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
 
-  '@vitest/coverage-c8@0.33.0(vitest@0.34.3(@vitest/ui@0.34.3)(happy-dom@10.11.1)(sass@1.66.1))':
+  '@vitest/coverage-c8@0.33.0(vitest@0.34.3)':
     dependencies:
       '@ampproject/remapping': 2.2.1
       c8: 7.14.0
@@ -5146,35 +5153,35 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  '@vue/compiler-core@3.3.4':
+  '@vue/compiler-core@3.5.13':
     dependencies:
-      '@babel/parser': 7.22.13
-      '@vue/shared': 3.3.4
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.13
+      entities: 4.5.0
       estree-walker: 2.0.2
-      source-map-js: 1.0.2
+      source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.3.4':
+  '@vue/compiler-dom@3.5.13':
     dependencies:
-      '@vue/compiler-core': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/compiler-core': 3.5.13
+      '@vue/shared': 3.5.13
 
-  '@vue/compiler-sfc@3.3.4':
+  '@vue/compiler-sfc@3.5.13':
     dependencies:
-      '@babel/parser': 7.22.13
-      '@vue/compiler-core': 3.3.4
-      '@vue/compiler-dom': 3.3.4
-      '@vue/compiler-ssr': 3.3.4
-      '@vue/reactivity-transform': 3.3.4
-      '@vue/shared': 3.3.4
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.13
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.3
-      postcss: 8.4.28
-      source-map-js: 1.0.2
+      magic-string: 0.30.13
+      postcss: 8.4.49
+      source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.3.4':
+  '@vue/compiler-ssr@3.5.13':
     dependencies:
-      '@vue/compiler-dom': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/compiler-dom': 3.5.13
+      '@vue/shared': 3.5.13
 
   '@vue/devtools-api@6.5.0': {}
 
@@ -5182,53 +5189,46 @@ snapshots:
     dependencies:
       '@volar/language-core': 1.10.1
       '@volar/source-map': 1.10.1
-      '@vue/compiler-dom': 3.3.4
-      '@vue/reactivity': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/compiler-dom': 3.5.13
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
       minimatch: 9.0.3
       muggle-string: 0.3.1
       vue-template-compiler: 2.7.14
     optionalDependencies:
       typescript: 5.2.2
 
-  '@vue/reactivity-transform@3.3.4':
+  '@vue/reactivity@3.5.13':
     dependencies:
-      '@babel/parser': 7.22.13
-      '@vue/compiler-core': 3.3.4
-      '@vue/shared': 3.3.4
-      estree-walker: 2.0.2
-      magic-string: 0.30.3
+      '@vue/shared': 3.5.13
 
-  '@vue/reactivity@3.3.4':
+  '@vue/runtime-core@3.5.13':
     dependencies:
-      '@vue/shared': 3.3.4
+      '@vue/reactivity': 3.5.13
+      '@vue/shared': 3.5.13
 
-  '@vue/runtime-core@3.3.4':
+  '@vue/runtime-dom@3.5.13':
     dependencies:
-      '@vue/reactivity': 3.3.4
-      '@vue/shared': 3.3.4
+      '@vue/reactivity': 3.5.13
+      '@vue/runtime-core': 3.5.13
+      '@vue/shared': 3.5.13
+      csstype: 3.1.3
 
-  '@vue/runtime-dom@3.3.4':
+  '@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.2.2))':
     dependencies:
-      '@vue/runtime-core': 3.3.4
-      '@vue/shared': 3.3.4
-      csstype: 3.1.2
+      '@vue/compiler-ssr': 3.5.13
+      '@vue/shared': 3.5.13
+      vue: 3.5.13(typescript@5.2.2)
 
-  '@vue/server-renderer@3.3.4(vue@3.3.4)':
-    dependencies:
-      '@vue/compiler-ssr': 3.3.4
-      '@vue/shared': 3.3.4
-      vue: 3.3.4
-
-  '@vue/shared@3.3.4': {}
+  '@vue/shared@3.5.13': {}
 
-  '@vue/test-utils@2.4.1(@vue/server-renderer@3.3.4(vue@3.3.4))(vue@3.3.4)':
+  '@vue/test-utils@2.4.1(@vue/server-renderer@3.5.13(vue@3.5.13(typescript@5.2.2)))(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       js-beautify: 1.14.9
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
       vue-component-type-helpers: 1.8.4
     optionalDependencies:
-      '@vue/server-renderer': 3.3.4(vue@3.3.4)
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.2.2))
 
   '@vue/typescript@1.8.8(typescript@5.2.2)':
     dependencies:
@@ -5248,21 +5248,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vueuse/core@10.4.1(vue@3.3.4)':
+  '@vueuse/core@10.4.1(vue@3.5.13(typescript@5.2.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.17
       '@vueuse/metadata': 10.4.1
-      '@vueuse/shared': 10.4.1(vue@3.3.4)
-      vue-demi: 0.14.6(vue@3.3.4)
+      '@vueuse/shared': 10.4.1(vue@3.5.13(typescript@5.2.2))
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.2.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.4.1(async-validator@4.2.5)(focus-trap@7.5.2)(vue@3.3.4)':
+  '@vueuse/integrations@10.4.1(async-validator@4.2.5)(focus-trap@7.5.2)(vue@3.5.13(typescript@5.2.2))':
     dependencies:
-      '@vueuse/core': 10.4.1(vue@3.3.4)
-      '@vueuse/shared': 10.4.1(vue@3.3.4)
-      vue-demi: 0.14.6(vue@3.3.4)
+      '@vueuse/core': 10.4.1(vue@3.5.13(typescript@5.2.2))
+      '@vueuse/shared': 10.4.1(vue@3.5.13(typescript@5.2.2))
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.2.2))
     optionalDependencies:
       async-validator: 4.2.5
       focus-trap: 7.5.2
@@ -5272,9 +5272,9 @@ snapshots:
 
   '@vueuse/metadata@10.4.1': {}
 
-  '@vueuse/shared@10.4.1(vue@3.3.4)':
+  '@vueuse/shared@10.4.1(vue@3.5.13(typescript@5.2.2))':
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.5.13(typescript@5.2.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5363,10 +5363,10 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  ant-design-vue@4.0.1(vue@3.3.4):
+  ant-design-vue@4.0.1(vue@3.5.13(typescript@5.2.2)):
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 6.1.0(vue@3.3.4)
+      '@ant-design/icons-vue': 6.1.0(vue@3.5.13(typescript@5.2.2))
       '@babel/runtime': 7.22.11
       '@ctrl/tinycolor': 3.6.1
       '@emotion/hash': 0.9.1
@@ -5385,8 +5385,8 @@ snapshots:
       shallow-equal: 1.2.1
       stylis: 4.3.0
       throttle-debounce: 5.0.0
-      vue: 3.3.4
-      vue-types: 3.0.2(vue@3.3.4)
+      vue: 3.5.13(typescript@5.2.2)
+      vue-types: 3.0.2(vue@3.5.13(typescript@5.2.2))
       warning: 4.0.3
 
   anymatch@3.1.3:
@@ -5855,6 +5855,8 @@ snapshots:
 
   csstype@3.1.2: {}
 
+  csstype@3.1.3: {}
+
   dargs@7.0.0: {}
 
   data-uri-to-buffer@4.0.1: {}
@@ -7085,6 +7087,10 @@ snapshots:
 
   macos-release@3.2.0: {}
 
+  magic-string@0.30.13:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magic-string@0.30.3:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -7189,6 +7195,8 @@ snapshots:
 
   nanoid@3.3.6: {}
 
+  nanoid@3.3.7: {}
+
   nanopop@2.3.0: {}
 
   natural-compare@1.4.0: {}
@@ -7449,7 +7457,13 @@ snapshots:
     dependencies:
       nanoid: 3.3.6
       picocolors: 1.0.0
-      source-map-js: 1.0.2
+      source-map-js: 1.2.1
+
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
   preact@10.17.1: {}
 
@@ -7826,6 +7840,8 @@ snapshots:
 
   source-map-js@1.0.2: {}
 
+  source-map-js@1.2.1: {}
+
   source-map@0.6.1: {}
 
   spdx-correct@3.2.0:
@@ -8224,19 +8240,19 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.66.1
 
-  vitepress@1.0.0-rc.10(@algolia/client-search@4.19.1)(@types/node@20.5.7)(async-validator@4.2.5)(sass@1.66.1)(search-insights@2.7.0):
+  vitepress@1.0.0-rc.10(@algolia/client-search@4.19.1)(@types/node@20.5.7)(async-validator@4.2.5)(sass@1.66.1)(search-insights@2.7.0)(typescript@5.2.2):
     dependencies:
       '@docsearch/css': 3.5.2
       '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 10.4.1(vue@3.3.4)
-      '@vueuse/integrations': 10.4.1(async-validator@4.2.5)(focus-trap@7.5.2)(vue@3.3.4)
+      '@vueuse/core': 10.4.1(vue@3.5.13(typescript@5.2.2))
+      '@vueuse/integrations': 10.4.1(async-validator@4.2.5)(focus-trap@7.5.2)(vue@3.5.13(typescript@5.2.2))
       focus-trap: 7.5.2
       mark.js: 8.11.1
       minisearch: 6.1.0
       shiki: 0.14.3
       vite: 4.4.9(@types/node@20.5.7)(sass@1.66.1)
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -8261,6 +8277,7 @@ snapshots:
       - stylus
       - sugarss
       - terser
+      - typescript
       - universal-cookie
 
   vitest@0.34.3(@vitest/ui@0.34.3)(happy-dom@10.11.1)(sass@1.66.1):
@@ -8307,14 +8324,14 @@ snapshots:
 
   vue-component-type-helpers@1.8.4: {}
 
-  vue-demi@0.14.6(vue@3.3.4):
+  vue-demi@0.14.6(vue@3.5.13(typescript@5.2.2)):
     dependencies:
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
 
-  vue-router@4.2.4(vue@3.3.4):
+  vue-router@4.2.4(vue@3.5.13(typescript@5.2.2)):
     dependencies:
       '@vue/devtools-api': 6.5.0
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
 
   vue-template-compiler@2.7.14:
     dependencies:
@@ -8328,18 +8345,20 @@ snapshots:
       semver: 7.5.4
       typescript: 5.2.2
 
-  vue-types@3.0.2(vue@3.3.4):
+  vue-types@3.0.2(vue@3.5.13(typescript@5.2.2)):
     dependencies:
       is-plain-object: 3.0.1
-      vue: 3.3.4
+      vue: 3.5.13(typescript@5.2.2)
 
-  vue@3.3.4:
+  vue@3.5.13(typescript@5.2.2):
     dependencies:
-      '@vue/compiler-dom': 3.3.4
-      '@vue/compiler-sfc': 3.3.4
-      '@vue/runtime-dom': 3.3.4
-      '@vue/server-renderer': 3.3.4(vue@3.3.4)
-      '@vue/shared': 3.3.4
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/runtime-dom': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.2.2))
+      '@vue/shared': 3.5.13
+    optionalDependencies:
+      typescript: 5.2.2
 
   warning@4.0.3:
     dependencies:
diff --git a/src/index.ts b/src/index.ts
index d13fcf2..da59164 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ export { Link } from './decorators/link'
 export { Hook } from './decorators/hook'
 export { createDecorator, getProtoMetadata } from './decorators/util'
 export * from './helper'
+export * from './simple-props'
 export {
   Component,
   InjectorKey,
diff --git a/src/simple-props/composables.ts b/src/simple-props/composables.ts
new file mode 100644
index 0000000..0b7aa75
--- /dev/null
+++ b/src/simple-props/composables.ts
@@ -0,0 +1,106 @@
+import {
+  camelize,
+  type CSSProperties,
+  getCurrentInstance,
+  useAttrs,
+  useSlots,
+} from 'vue'
+
+export function camelizePropKey(p: string | symbol): string | symbol {
+  return typeof p === 'string' ? camelize(p) : p
+}
+
+export function useProps<T>(): T {
+  const instance = getCurrentInstance()
+  if (!instance) {
+    throw new Error('useProps must be called inside setup()')
+  }
+
+  const slots = useSlots()
+  const getProps = () => {
+    return Object.fromEntries(
+      Object.entries(instance.vnode.props || {}).map(([k, v]) => [
+        camelize(k),
+        v,
+      ]),
+    )
+  }
+
+  const proxy = new Proxy(
+    {},
+    {
+      get(target, p, receiver) {
+        const slotName = getSlotName(p)
+        if (slotName) {
+          const slot = Reflect.get(slots, slotName, receiver)
+          if (slot) return slot
+        }
+        const key = camelizePropKey(p)
+        if (key in instance.props) {
+          // @ts-ignore
+          return instance.props[key]
+        } else {
+          return Reflect.get(getProps(), key, receiver)
+        }
+        return Reflect.get(getProps(), key, receiver)
+      },
+      ownKeys() {
+        return [
+          ...new Set([
+            ...Reflect.ownKeys(getProps()),
+            ...Reflect.ownKeys(slots).map((k) =>
+              typeof k === 'string' ? camelize(`render-${k}`) : k,
+            ),
+          ]),
+        ]
+      },
+      has(target, p) {
+        const slotName = getSlotName(p)
+        if (slotName) {
+          return Reflect.has(slots, slotName)
+        }
+        return Reflect.has(getProps(), camelizePropKey(p))
+      },
+      getOwnPropertyDescriptor(target, p) {
+        const slotName = getSlotName(p)
+        if (slotName) {
+          const descriptor = Reflect.getOwnPropertyDescriptor(slots, slotName)
+          if (descriptor) return descriptor
+        }
+        return Reflect.getOwnPropertyDescriptor(getProps(), camelizePropKey(p))
+      },
+    },
+  ) as any
+
+  return proxy
+}
+
+function getSlotName(p: PropertyKey) {
+  if (typeof p === 'string' && p.startsWith('render'))
+    return p.slice(6).replace(/^[A-Z]/, (s) => s.toLowerCase())
+}
+
+export interface ClassAndStyle {
+  class?: string
+  style?: CSSProperties
+}
+
+export function useClassAndStyle(): ClassAndStyle {
+  const instance = getCurrentInstance()
+  if (!instance) {
+    throw new Error('useClassAndStyle must be called inside setup()')
+  }
+
+  const attrs = useAttrs()
+  const keys = ['class', 'style']
+
+  return new Proxy(attrs, {
+    get(target, p, receiver) {
+      if (keys.includes(p as string)) {
+        return Reflect.get(target, p, receiver)
+      }
+    },
+    ownKeys: () => keys,
+    has: (target, p) => keys.includes(p as string),
+  })
+}
diff --git a/src/simple-props/index.ts b/src/simple-props/index.ts
new file mode 100644
index 0000000..d493b6f
--- /dev/null
+++ b/src/simple-props/index.ts
@@ -0,0 +1,32 @@
+import {
+  type ComponentOptions,
+  defineComponent as vueDefineComponent,
+} from 'vue'
+import type { ComponentType, FunctionalComponent } from './types'
+import { useProps } from './composables'
+
+export {
+  type ClassAndStyle,
+  useClassAndStyle,
+  camelizePropKey,
+} from './composables'
+export * from './types'
+
+export function defineComponent<T extends Record<any, any>>(
+  comp: FunctionalComponent<T, any, any>,
+  extraOptions?: ComponentOptions,
+): ComponentType<T> {
+  const fn: FunctionalComponent = (_props, ctx) => {
+    const props = useProps()
+    return comp(props as any, ctx)
+  }
+  Object.keys(comp).forEach((key) => {
+    // @ts-expect-error
+    fn[key] = comp[key]
+  })
+  return vueDefineComponent(fn, {
+    inheritAttrs: false,
+    name: comp.name || comp.displayName,
+    ...extraOptions,
+  }) as any
+}
diff --git a/src/simple-props/types.ts b/src/simple-props/types.ts
new file mode 100644
index 0000000..bbf8f61
--- /dev/null
+++ b/src/simple-props/types.ts
@@ -0,0 +1,51 @@
+import type {
+  ComponentPropsOptions,
+  DefineSetupFnComponent,
+  EmitsOptions,
+  EmitsToProps,
+  FunctionalComponent as VueFunctionalComponent,
+  SetupContext,
+  ShortEmitsToObject,
+  Slots,
+  SlotsType,
+} from 'vue'
+
+type RemovePrefix<
+  K extends string,
+  P extends string,
+> = K extends `${P}${infer Event}` ? Uncapitalize<Event> : never
+
+export type ExtractProps<T> = Omit<T, `render${string}`> &
+  Partial<Pick<T, keyof T & `render${string}`>>
+export type ExtractEvent<T> = {
+  [P in keyof T as RemovePrefix<string & P, 'on'>]: T[P]
+}
+export type ExtractSlots<T> = {
+  [P in keyof T as RemovePrefix<string & P, 'render'>]: T[P]
+}
+
+export type ComponentType<T extends Record<any, any>> = DefineSetupFnComponent<
+  ExtractProps<T>,
+  ExtractEvent<T>,
+  SlotsType<ExtractSlots<T>>
+>
+
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
+export interface FunctionalComponent<
+  P = {},
+  E extends EmitsOptions | Record<string, any[]> = {},
+  S extends Record<string, any> = any,
+  EE extends EmitsOptions = ShortEmitsToObject<E>,
+> {
+  (
+    props: P & EmitsToProps<EE>,
+    ctx: SetupContext<EE, IfAny<S, {}, SlotsType<S>>>,
+  ): any
+  props?: ComponentPropsOptions<P>
+  emits?: EE | (keyof EE)[]
+  slots?: IfAny<S, Slots, SlotsType<S>>
+  expose?: string[]
+  inheritAttrs?: boolean
+  displayName?: string
+  compatConfig?: VueFunctionalComponent['compatConfig']
+}
diff --git a/tsconfig.json b/tsconfig.json
index ed714f4..90fa6d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "@abraham/reflection", "vitest"],
+    "types": ["vite/client", "@abraham/reflection", "vitest", "vue/jsx"],
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "useDefineForClassFields": false,