diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 392ddaa22d..2d4e1b6ac0 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -17,32 +17,25 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { badgeProps } from './badge'
 
-export default defineComponent({
+defineOptions({
   name: 'ElBadge',
+})
 
-  props: badgeProps,
+const props = defineProps(badgeProps)
 
-  setup(props) {
-    const ns = useNamespace('badge')
+const ns = useNamespace('badge')
 
-    const content = computed<string>(() => {
-      if (props.isDot) return ''
+const content = computed<string>(() => {
+  if (props.isDot) return ''
 
-      if (typeof props.value === 'number' && typeof props.max === 'number') {
-        return props.max < props.value ? `${props.max}+` : `${props.value}`
-      }
-      return `${props.value}`
-    })
-
-    return {
-      ns,
-      content,
-    }
-  },
+  if (typeof props.value === 'number' && typeof props.max === 'number') {
+    return props.max < props.value ? `${props.max}+` : `${props.value}`
+  }
+  return `${props.value}`
 })
 </script>