Element hidden but its validation tips still showes

Question

I'm using VUE 2.5.1 & iView 4.0.0. There are 2 forms in a page of my project, and I use v-if property to switch them. The problem is after I re-assign the value of form_data (the new one does not have property 'usage') and set this.met_type to 3, the 'Item' input showes, but a line of red text 'usage is required' also showes under it. The 'Usage' input is already hidden, why does its validation tips still show? Is there a way to avoid this wrong message?

<template>
    <div v-if="met_type==2">
       <Form :rules="ruleCustom" :model="form_data">
        <Row>
          <Col span="12">
            <FormItem label="Usage" prop="usage" required>
              <Input :value="form_data.usage" readonly />
            </FormItem>
          </Col>
        </Row>
        <!-- other code omitted -->
      </Form>
    </div>
    <div v-if="met_type==3">
       <Form :rules="ruleCustom" :model="form_data">
        <Row>
          <Col span="12">
            <FormItem label="Item" prop="item" required>
              <Input :value="form_data.item" readonly />
            </FormItem>
          </Col>
        </Row>
        <!-- other code omitted -->
      </Form>
    </div>
    <!-- other code omitted -->
</template>

<script>
export default {
    methods: {
        loadData: function(met_type) {
            dataUtils.fetch(this.met_id, met_type, (retVal) => {
                // Fetch data
                // whe met_type == 3, form_data does not have property 'usage'
                this.form_data = retVal.data;
                this.met_type = met_type;
            });
        }
    }
}
</script>

Answer 1

After I put these two forms into seperate template files, the problem is solved. But I still don't understand why this takes effective.

// ComponentA.vue
<template>
    <Form :rules="ruleCustom" :model="form_data">
        <Row>
            <Col span="12">
                <FormItem label="Usage" prop="usage" required>
                    <Input :value="form_data.usage" readonly />
                </FormItem>
            </Col>
        </Row>
        <!-- other code omitted -->
    </Form>
</template>

// ComponentB.vue
<template>
    <Form :rules="ruleCustom" :model="form_data">
        <Row>
            <Col span="12">
                <FormItem label="Item" prop="item" required>
                    <Input :value="form_data.item" readonly />
                </FormItem>
            </Col>
        </Row>
        <!-- other code omitted -->
    </Form>
</template>

// The main component file
<template>
    <div v-if="met_type==2">
        <ComponentA>
        </ComponentA>
    </div>
    <div v-if="met_type==3">
        <ComponentB>
        </ComponentB>
    </div>
    <!-- other code omitted -->
</template>

<script>
export default {
    methods: {
        loadData: function(met_type) {
            dataUtils.fetch(this.met_id, met_type, (retVal) => {
                // Fetch data
                // whe met_type == 3, form_data does not have property 'usage'
                this.form_data = retVal.data;
                this.met_type = met_type;
            });
        }
    }
}
</script>