设计一个vue组件，该组件能够根据传入配置动态生成表单，并能验证有效性，支持同步异步

在Vue中设计一个动态生成表单并包含验证功能的组件，可以使用`v-for`循环、`props`接收配置数据以及`Vue.extend`创建动态组件实例。以下是一个基础的示例：

<template>
  <div>
    <form v-for="item in formConfigs" :key="item.id">
      <label :for="item.name">{{ item.label }}</label>
      <input type="text" :id="item.name" v-model="item.value" :required="item.isRequired">
      <!-- 如果有更多类型的输入，如select、textarea等，可以添加相应元素 -->
      <button @click.prevent="validateField(item)">提交</button>
      <p v-if="errors[item.name]">错误信息: {{ errors[item.name] }}</p>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    formConfigs: {
      type: Array,
      required: true,
      // 验证每个配置项是否合法
      validator: function(value) {
        return value.every(config => {
          return config && typeof config === 'object' &&
            ['string', 'number'].includes(typeof config.name) &&
            config.isRequired !== undefined;
        });
      },
      message: "配置项必须是有效的对象，包括'name'和'required'"
    }
  },
  data() {
    return {
      errors: {} // 初始化错误信息
    };
  },
  methods: {
    validateField(config) {
      if (!config.isRequired || this.validateInput(config.value)) {
        delete this.errors[config.name];
      } else {
        this.errors[config.name] = '这是必填字段';
      }
    },
    validateInput(input) { // 这里可以进一步扩展异步校验
      // 示例：同步验证，仅做基本格式检查
      const isValid = input.trim() !== '';
      return isValid;
    }
  }
};
</script>