vue3 + element-plus dynamic add form item validate falied

Question

I occured a problem with inline rules in element-plus(vue3) form item. Following is the code I had writed.

<el-form
   ref="packFormRef"
   :model="packForm"
    label-width="80px"
    class="add-app-dialog"
    status-icon
 > 
  <div v-for="(item, index) in packForm.packages" :key="index">
    <div v-show="index !== 0" class="segerate"></div>
    <el-form-item 
            label="name"
            :prop="'name.' + index + '.value'"
            :rules="{
              required: true,
              message: 'name cannot empty',
              trigger: 'blur',
            }"
          >
            <el-input v-model="item.name" placeholder="please input name" />
          </el-form-item>
          <el-form-item 
            label="os" 
            :prop="'item.' + index + '.os'"
            :rules="{required: true, message: 'description is required', trigger: 'blur'}"
          >
            <el-input v-model="item.os" placeholder="please input os" />
            <div class="btn-ground">
              <el-icon
                v-show="index !== 0"
                class="email-btn"
                @click.prevent="
                  packForm.packages.length != 1 && removeRow(item)
                "
              >
                <Delete />
              </el-icon>
              <el-icon
                v-show="index + 1 == packForm.packages.length"
                class="email-btn"
                @click="addRow"
              >
                <Plus />
              </el-icon>
            </div>
          </el-form-item>
   </div>
</el-form>

I have test few methods to fixed this problem. But it didn't work. Hope you can give me some suggestion. And Thanks a lot.