Vue 3.0 element 中的 $refs 如何使用

Vue 3.0 中的DOM ref用法
在element-plus中文档中没有具体使用方法

3.0文档连接
https://www.vue3js.cn/docs/zh/guide/composition-api-template-refs.html

<template>
  <div>
    <el-form :model="data"
             ref="ruleForm"
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="活动名称"
                    prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right;">
        <el-button icon="el-icon-edit"
                   @click="upformdatafun()"
                   type="primary">提交</el-button>
        <el-button icon="el-icon-refresh-right"
                   @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { ref, reactive, onMounted, toRefs, watch } from "vue";
export default {
  name: "control",
  props: {
    title: {
      type: String
    }
  },
  setup(props) {
    // const { title } = toRefs(props)
    // mounted
    onMounted(() => {
      // dom加载完成
    })
    const data = reactive({
      name: 1
    });
    const ruleForm = ref(null)
    const upformdatafun = () => {
      ruleForm.value.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    const resetForm = () => {
      ruleForm.value.resetFields()
    }

    return {
      data,
      ruleForm,
      upformdatafun,
      resetForm
    }
  },
  components: {

  },
}
</script>
<style scoped>
</style>