Html页面元素的ref属性，怎么设置成某个对象的属性？

[iguoji]

问题背景：在使用Element Plus时，假如页面上有一个el-form表单，那么我需要单独声明多个变量，如下伪代码：

<template>
    <form ref="element" :model="model" :rules="rules">
        <input ref="username" />
        <input ref="password" />
    </form>
</template>

<script setup>
// 第一个
const element = ref(null);
// 第二个
const model = reactive({
    username: '',
    password: '',
});
// 第三个
const rules = {
   username: [],
   password: [],
}
// 下面的统一算第四个：因为表单验证不通过，我想给输入框获得焦点，所以需要ref
const username = ref(null);
const password = ref(null);
</script>

请问有没有一种办法，可以不需要单独声明一个个变量，将这些属性都放到一个对象中

例如：代码是错误的，但是是我想要的

<template>
    <form ref="form.element">
        <input ref="form.username" />
        <input ref="form.password" />
    </form>
</template>

<script setup>
const form = reactive({
    element: null,
    username: null,
    password: null,
});
</script>

[edison1105]

use Function Refs