Element hidden but its validation tips still showes - iview

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>