diff --git a/packages/Input/src/input.vue b/packages/Input/src/input.vue
index 6d8ddc4..066cfda 100644
--- a/packages/Input/src/input.vue
+++ b/packages/Input/src/input.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-input class="emqx-input">
+  <el-input ref="input" class="emqx-input">
     <template v-if="$slots.prepend" #prepend>
       <slot name="prepend"></slot>
     </template>
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElInput } from 'element-plus'
 
 export default defineComponent({
@@ -24,5 +24,11 @@ export default defineComponent({
   components: {
     ElInput,
   },
+  setup() {
+    const input = ref()
+    return {
+      input,
+    }
+  },
 })
 </script>
diff --git a/packages/Select/src/select.vue b/packages/Select/src/select.vue
index 705c7cc..bd0a241 100644
--- a/packages/Select/src/select.vue
+++ b/packages/Select/src/select.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-select class="emqx-select" ref="select">
+  <el-select ref="select" class="emqx-select">
     <slot></slot>
   </el-select>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElSelect } from 'element-plus'
 
 export default defineComponent({
@@ -13,5 +13,11 @@ export default defineComponent({
   components: {
     ElSelect,
   },
+  setup() {
+    const select = ref()
+    return {
+      select,
+    }
+  },
 })
 </script>
diff --git a/packages/Table/src/table.vue b/packages/Table/src/table.vue
index 02c8924..4f79a8f 100644
--- a/packages/Table/src/table.vue
+++ b/packages/Table/src/table.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-table class="emqx-table">
+  <el-table ref="table" class="emqx-table">
     <slot></slot>
   </el-table>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElTable } from 'element-plus'
 
 export default defineComponent({
@@ -13,5 +13,11 @@ export default defineComponent({
   components: {
     ElTable,
   },
+  setup() {
+    const table = ref()
+    return {
+      table,
+    }
+  },
 })
 </script>
diff --git a/packages/Upload/src/upload.vue b/packages/Upload/src/upload.vue
index eb779df..f60e91c 100644
--- a/packages/Upload/src/upload.vue
+++ b/packages/Upload/src/upload.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-upload class="emqx-upload">
+  <el-upload ref="upload" class="emqx-upload">
     <slot></slot>
     <template v-if="$slots.tip" #tip>
       <slot name="tip"></slot>
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { ElUpload } from 'element-plus'
 
 export default defineComponent({
@@ -16,5 +16,11 @@ export default defineComponent({
   components: {
     ElUpload,
   },
+  setup() {
+    const upload = ref()
+    return {
+      upload,
+    }
+  },
 })
 </script>