I'm using vue3 setup and elementUI plus,the form's validate is bothering me,the error is:"form.js?t=1640941515436:71 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'validate')".

program is ok when I write the code below:

// form.js
import { reactive, ref, unref } from 'vue'

let formRef = ref(null)
let formData = reactive(formData1)
let rules = reactive(rules1)

function valid() {
    let form = unref(formRef)
    return form.validate()
}

export { 
    formRef, 
    formData, 
    rules, 
    valid
}

// login.vue
<script setup>
import { formRef, formData, rules, valid } from './form'
const submit = async () => {
    let validResult = await valid().catch((err) => {
        return err
    })
    
    if (validResult === true) {   
    }else {
    }
}

actually I want to module the whole form,includes the html element,but is too difficult to me,so I just use Class in form.js,then I can use the Class in other file,but it throwed an error, error picture is in the end.

"Class" code:

// form.js
class Form {
    constructor(formData, rules) {
        this.formData = reactive(formData)
        this.rules = reactive(rules)
        this.formDom = ref()
    }
    valid() {
        let form = unref(this.formDom)
        return form.validate()
    }
}

export { Form } 

// Login.vue
import { Form } from './form'
let fromInstance = new Form(formData1, rules1)
const submit = async () => {
    let validResult = await fromInstance.valid().catch((err) => {
        return err
    })
    
    if (validResult === true) {
        
        
    }else {
        
    }
}

error pic