From f4f08614fc95895f0f101edd5cd832de7d6239bd Mon Sep 17 00:00:00 2001
From: kilisamemarisaaa <1798456934@qq.com>
Date: Fri, 4 Sep 2026 14:51:22 +0800
Subject: [PATCH] fix(common-ui): fetch api options after late binding

---
 .changeset/calm-api-selects-load.md           |  5 ++++
 .../__tests__/api-component.test.ts           | 26 +++++++++++++++++++
 .../api-component/api-component.vue           |  6 ++---
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/calm-api-selects-load.md

diff --git a/.changeset/calm-api-selects-load.md b/.changeset/calm-api-selects-load.md
new file mode 100644
index 000000000..3025d66e9
--- /dev/null
+++ b/.changeset/calm-api-selects-load.md
@@ -0,0 +1,5 @@
+---
+'@vben/common-ui': patch
+---
+
+fix(@vben/common-ui): fetch ApiComponent options when an API is provided after mount
diff --git a/packages/effects/common-ui/src/components/api-component/__tests__/api-component.test.ts b/packages/effects/common-ui/src/components/api-component/__tests__/api-component.test.ts
index a3a7a6e06..f4595fce5 100644
--- a/packages/effects/common-ui/src/components/api-component/__tests__/api-component.test.ts
+++ b/packages/effects/common-ui/src/components/api-component/__tests__/api-component.test.ts
@@ -1,3 +1,5 @@
+import type { ApiComponentProps } from '../types';
+
 import { mount } from '@vue/test-utils';
 import { defineComponent, h, markRaw, nextTick, ref } from 'vue';
 
@@ -128,4 +130,28 @@ describe('api-component.vue', () => {
     expect(handleUpdate).toHaveBeenCalledWith('selected');
     expect(input.props('modelValue')).toBe('selected');
   });
+
+  it('fetches when the api is provided after mount', async () => {
+    const api = vi
+      .fn()
+      .mockResolvedValue([{ label: 'Loaded', value: 'loaded' }]);
+    const apiRef = ref<ApiComponentProps['api']>();
+    const Harness = defineComponent({
+      setup() {
+        return () =>
+          h(ApiComponent, {
+            api: apiRef.value,
+            component: markRaw(ModelValueInput),
+          });
+      },
+    });
+
+    mount(Harness);
+    expect(api).not.toHaveBeenCalled();
+
+    apiRef.value = api;
+    await nextTick();
+
+    expect(api).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/effects/common-ui/src/components/api-component/api-component.vue b/packages/effects/common-ui/src/components/api-component/api-component.vue
index 1ea19380a..73d390a23 100644
--- a/packages/effects/common-ui/src/components/api-component/api-component.vue
+++ b/packages/effects/common-ui/src/components/api-component/api-component.vue
@@ -200,9 +200,9 @@ const mergedParams = computed(() => {
 });
 
 watch(
-  mergedParams,
-  (value, oldValue) => {
-    if (isEqual(value, oldValue)) {
+  [() => props.api, mergedParams],
+  ([api, value], [oldApi, oldValue]) => {
+    if (api === oldApi && isEqual(value, oldValue)) {
       return;
     }
     fetchApi();