我有脚本。我需要将其转换为vue3组合API。试图将其转换为组合API，导致许多错误

export default {
  props: {
    field: {
      type: Object,
      required: true
    },
    formValues: {
      type: Object,
      required: true
    },
    debug: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      fieldValue: '' // Store the field value locally in the component
    };
  },
  watch: {
    fieldValue: {
      immediate: true,
      handler() {
        // Trigger validation when the local field value changes
        this.$emit("form-data",
          {
            key: this.field.key,
            value: this.fieldValue,
          },
        )
      }
    }
  },
  computed: {
    showFeild() {
      if (this.field.showIf == undefined) {
        //check if visible is present or not
        return true;
      }
      try {
        console.log("showExpression ", this.formValues);
        // eslint-disable-next-line no-unused-vars
        var form = this.formValues;
        var res = eval(this.field.showIf);
        return res;
      } catch (e) {
        console.error("Please fix expression ", this.field.showIf, "for ", this.field.key);
        return true;
      }
    },
    validateField() {
      if (this.field.required && (!this.fieldValue || this.fieldValue.trim() === '')) {
        return false;
      }
      // Add more validation rules as needed
      return true;
    }
  },
  methods:{
    validate(){
        console.log("validating..",this.field.key);
    }
  }
};

我尝试了下面的代码，但在实现 prop ，手表，计算时遇到了问题。
下面的片段是我正在做的事情。

/**
 * FileName: Template.js With Composition API
 * this has multiple errors
 */

import { ref, computed ,defineProps} from "vue";

export default function () {

    const fieldValue = ref(0);
    const props = defineProps({
        field: Object
      })

    //watch feild value
    const showFeild = computed(() => {
        if (props.field.showIf == undefined) {
            //check if visible is present or not
            return true;
        }
        try {
            console.log("showExpression ", this.formValues);
            // eslint-disable-next-line no-unused-vars
            var form = this.formValues;
            var res = eval(props.field.showIf);
            return res;
        } catch (e) {
            console.error("Please fix expression ", props.field.showIf, "for ", props.field.key);
            return true;
        }
    });

    const validateField = computed(() => {
        if (props.field.required && (!props.fieldValue || props.fieldValue.trim() === '')) {
            return false;
        }
        // Add more validation rules as needed
        return true;
    });

    return {
        fieldValue,
        showFeild,
        validateField,
        props
    }
}

我通过. import useComp from './Template.js'将其导入到另一个组件中，并在设置方法. CompA.vue中使用它。

setup(){

      const {fieldValue,showFeild,validateField} = useComp()
      return{
        fieldValue,showFeild,validateField
      }
  },