fix(form): select下拉列表分页不生效问题

packages/form/src/fields/Select.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup name="MFormSelect">
-import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
+import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
 
@@ -331,10 +331,14 @@ if (typeof props.config.options === 'function') {
   });
 }
 
-props.config.remote &&
+if (props.config.remote) {
-  onMounted(async () => {
+  const unWacth = watch(
-    await nextTick();
+    () => tMagicSelect.value?.scrollbarWrap,
-    tMagicSelect.value?.scrollbarWrap?.addEventListener('scroll', async (e: Event) => {
+    (scrollbarWrap) => {
+      if (!scrollbarWrap) {
+        return;
+      }
+      scrollbarWrap.addEventListener('scroll', async (e: Event) => {
         const el = e.currentTarget as HTMLDivElement;
         if (moreLoadingVisible.value) {
           return;
@@ -350,7 +354,13 @@ props.config.remote &&
         options.value = await getOptions();
         moreLoadingVisible.value = false;
       });
-  });
+      unWacth();
+    },
+    {
+      immediate: true,
+    },
+  );
+}
 
 const popperClass = mForm?.popperClass;