diff --git a/src/ECharts.ts b/src/ECharts.ts
index eafb3ec..9db9065 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -101,6 +101,58 @@ export default defineComponent({
 
     // @ts-expect-error listeners for Vue 2 compatibility
     const listeners = getCurrentInstance().proxy.$listeners;
+    const realListeners: Record<string, any> = {};
+
+    if (!listeners) {
+      // This is for Vue 3.
+      // We are converting all `on<Event>` props to event listeners compatible with Vue 2
+      // and collect them into `realListeners` so that we can bind them to the chart instance
+      // later in the same way.
+      // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
+      // `nativeListeners` so that we can bind them to the root element directly.
+      Object.keys(attrs)
+        .filter(key => isOn(key))
+        .forEach(key => {
+          // onClick    -> c + lick
+          // onZr:click -> z + r:click
+          let event = key.charAt(2).toLowerCase() + key.slice(3);
+
+          // Collect native DOM events
+          if (event.indexOf("native:") === 0) {
+            // native:click -> onClick
+            const nativeKey = `on${event.charAt(7).toUpperCase()}${event.slice(
+              8
+            )}`;
+
+            nativeListeners[nativeKey] = attrs[key];
+            return;
+          }
+
+          // clickOnce    -> ~click
+          // zr:clickOnce -> ~zr:click
+          if (event.substring(event.length - 4) === "Once") {
+            event = `~${event.substring(0, event.length - 4)}`;
+          }
+
+          realListeners[event] = attrs[key];
+        });
+    } else {
+      // This is for Vue 2.
+      // We just need to distinguish normal events and `native:<event>` events and
+      // collect them into `realListeners` and `nativeListeners` respectively.
+      // For `native:<event>` events, we just strip the `native:` part and collect them
+      // into `nativeListeners` so that we can bind them to the root element directly.
+      // native:click   -> click
+      // ~native:click  -> ~click
+      // &~!native:click -> &~!click
+      Object.keys(listeners).forEach(key => {
+        if (NATIVE_EVENT_RE.test(key)) {
+          nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] = listeners[key];
+        } else {
+          realListeners[key] = listeners[key];
+        }
+      });
+    }
 
     function init(option?: Option) {
       if (!inner.value) {
@@ -117,60 +169,6 @@ export default defineComponent({
         instance.group = props.group;
       }
 
-      const realListeners: Record<string, any> = {};
-
-      if (!listeners) {
-        // This is for Vue 3.
-        // We are converting all `on<Event>` props to event listeners compatible with Vue 2
-        // and collect them into `realListeners` so that we can bind them to the chart instance
-        // later in the same way.
-        // For `onNative:<event>` props, we just strip the `Native:` part and collect them into
-        // `nativeListeners` so that we can bind them to the root element directly.
-        Object.keys(attrs)
-          .filter(key => isOn(key))
-          .forEach(key => {
-            // onClick    -> c + lick
-            // onZr:click -> z + r:click
-            let event = key.charAt(2).toLowerCase() + key.slice(3);
-
-            // Collect native DOM events
-            if (event.indexOf("native:") === 0) {
-              // native:click -> onClick
-              const nativeKey = `on${event
-                .charAt(7)
-                .toUpperCase()}${event.slice(8)}`;
-
-              nativeListeners[nativeKey] = attrs[key];
-              return;
-            }
-
-            // clickOnce    -> ~click
-            // zr:clickOnce -> ~zr:click
-            if (event.substring(event.length - 4) === "Once") {
-              event = `~${event.substring(0, event.length - 4)}`;
-            }
-
-            realListeners[event] = attrs[key];
-          });
-      } else {
-        // This is for Vue 2.
-        // We just need to distinguish normal events and `native:<event>` events and
-        // collect them into `realListeners` and `nativeListeners` respectively.
-        // For `native:<event>` events, we just strip the `native:` part and collect them
-        // into `nativeListeners` so that we can bind them to the root element directly.
-        // native:click   -> click
-        // ~native:click  -> ~click
-        // &~!native:click -> &~!click
-        Object.keys(listeners).forEach(key => {
-          if (NATIVE_EVENT_RE.test(key)) {
-            nativeListeners[key.replace(NATIVE_EVENT_RE, "$1")] =
-              listeners[key];
-          } else {
-            realListeners[key] = listeners[key];
-          }
-        });
-      }
-
       Object.keys(realListeners).forEach(key => {
         let handler = realListeners[key];