diff --git a/ReadMe.md b/ReadMe.md
index a1f0226..f386c47 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -20,21 +20,19 @@ A real [JSX][1] wrapper for [ECharts][2] based on [TypeScript][3] & [Web compone
 | `>=1`  |  `main`  | ✅developing | Web components |
 |  `<1`  | `master` | ❌deprecated |     React      |
 
-## Quick start
+## Installation
 
-### Installation
-
-#### Core package
+### Core package
 
 ```shell
 npm i echarts-jsx
 ```
 
-#### View renderer
+### View renderer
 
 Any kinds of Render engines that you like can be used to render ECharts JSX tags.
 
-##### React 19+
+#### React 19+
 
 Old versions have a property bug of Custom elements: https://github.com/facebook/react/issues/11347
 
@@ -42,7 +40,7 @@ Old versions have a property bug of Custom elements: https://github.com/facebook
 npm i react@^19 react-dom@^19
 ```
 
-##### Preact
+#### Preact
 
 ```shell
 npm i preact
@@ -50,7 +48,7 @@ npm i preact
 
 then configure your tool-chain: https://preactjs.com/guide/v10/getting-started#integrating-into-an-existing-pipeline
 
-##### DOM Renderer v2 & WebCell v3
+#### DOM Renderer v2 & WebCell v3
 
 ```shell
 npm i dom-renderer@^2
@@ -58,7 +56,32 @@ npm i dom-renderer@^2
 
 then configure your project as [the demo code](preview/).
 
-### Simple example
+#### Vue 3
+
+```shell
+npm create vite vue-echarts-app -- --template vue-ts
+```
+
+then configure your Vite as following code:
+
+```js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: tag => tag.startsWith('ec-')
+                }
+            }
+        })
+    ]
+});
+```
+
+## Simple example
 
 Origin: [ECharts official example][9]
 
diff --git a/package.json b/package.json
index f661861..e1b4300 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -46,7 +46,7 @@
         "parcel": "~2.12.0",
         "prettier": "^3.2.5",
         "rimraf": "^5.0.5",
-        "typedoc": "^0.25.12",
+        "typedoc": "^0.25.13",
         "typedoc-plugin-mdn-links": "^3.1.19",
         "typescript": "~5.4.4"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e64a2f2..863a95d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,11 +50,11 @@ devDependencies:
     specifier: ^5.0.5
     version: 5.0.5
   typedoc:
-    specifier: ^0.25.12
-    version: 0.25.12(typescript@5.4.4)
+    specifier: ^0.25.13
+    version: 0.25.13(typescript@5.4.4)
   typedoc-plugin-mdn-links:
     specifier: ^3.1.19
-    version: 3.1.19(typedoc@0.25.12)
+    version: 3.1.19(typedoc@0.25.13)
   typescript:
     specifier: ~5.4.4
     version: 5.4.4
@@ -6019,16 +6019,16 @@ packages:
       is-typed-array: 1.1.13
     dev: true
 
-  /typedoc-plugin-mdn-links@3.1.19(typedoc@0.25.12):
+  /typedoc-plugin-mdn-links@3.1.19(typedoc@0.25.13):
     resolution: {integrity: sha512-v08h/JorBemjl6xQyw+tB1P5BX2OUI9zr9vR5ZTuLsmETUrS3NC2z6ou8Ci0FDjSL0nA1tGsdXhUn42sEgkkUA==}
     peerDependencies:
       typedoc: '>= 0.23.14 || 0.24.x || 0.25.x'
     dependencies:
-      typedoc: 0.25.12(typescript@5.4.4)
+      typedoc: 0.25.13(typescript@5.4.4)
     dev: true
 
-  /typedoc@0.25.12(typescript@5.4.4):
-    resolution: {integrity: sha512-F+qhkK2VoTweDXd1c42GS/By2DvI2uDF4/EpG424dTexSHdtCH52C6IcAvMA6jR3DzAWZjHpUOW+E02kyPNUNw==}
+  /typedoc@0.25.13(typescript@5.4.4):
+    resolution: {integrity: sha512-pQqiwiJ+Z4pigfOnnysObszLiU3mVLWAExSPf+Mu06G/qsc3wzbuM56SZQvONhHLncLUhYzOVkjFFpFfL5AzhQ==}
     engines: {node: '>= 16'}
     hasBin: true
     peerDependencies:
diff --git a/preview/index.tsx b/preview/index.tsx
index 15d145e..265881c 100644
--- a/preview/index.tsx
+++ b/preview/index.tsx
@@ -6,7 +6,7 @@ import '../source/components/y-axis';
 import '../source/charts/line';
 
 new DOMRenderer().render(
-    <ec-svg-chart style={{ height: '75vh' }}>
+    <ec-svg-renderer style={{ height: '75vh' }}>
         <ec-title text="ECharts Getting Started Example" />
 
         <ec-x-axis
@@ -19,6 +19,6 @@ new DOMRenderer().render(
             data={[150, 230, 224, 218, 135, 147, 260]}
             onClick={console.log}
         />
-    </ec-svg-chart>,
+    </ec-svg-renderer>,
     document.querySelector('main')
 );
diff --git a/source/Option.ts b/source/Option.ts
index fc4e3ff..b0ebc28 100644
--- a/source/Option.ts
+++ b/source/Option.ts
@@ -26,11 +26,24 @@ export abstract class ECOptionElement
     }
 
     get eventSelector() {
-        return [this.chartName || this.chartTagName, this['type']]
+        return [
+            this.isSeries && 'series',
+            this.chartName || this.chartTagName,
+            this['type']
+        ]
             .filter(Boolean)
             .join('.');
     }
 
+    get renderer() {
+        for (
+            let parent = this.parentElement;
+            parent;
+            parent = parent.parentElement
+        )
+            if (parent instanceof EChartsElement) return parent;
+    }
+
     connectedCallback() {
         for (const [key, value] of Object.entries(this.toJSON()))
             if (EventKeyPattern.test(key) && typeof value === 'function')
@@ -61,21 +74,11 @@ export abstract class ECOptionElement
     }
 
     listen(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.onChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+        this.renderer?.onChild(event, this.eventSelector, handler);
     }
 
     forget(event: ZRElementEventName, handler: ZRElementEventHandler) {
-        if (this.isConnected)
-            this.closest<EChartsElement>('ec-chart')?.offChild(
-                event,
-                this.eventSelector,
-                handler
-            );
+        this.renderer?.offChild(event, this.eventSelector, handler);
     }
 
     setAttribute(name: string, value: string) {