vue-controlled-form-fields is a flexible and hight-performance state-managament tool for creating different level of forms.
<c-form :submit="onSubmit">
<div slot-scope="{pristine, invalid}">
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<field name="firstName" component="input" placeholder="First Name"/>
</div>
<h2>A Reusable Input Component</h2>
<div>
<label>Interests</label>
<field name="interests">
<InterestPicker/>
</field>
</div>
<h2>Using slot-scope</h2>
<field name="bio" :validate="[required]">
<div slot-scope="{ input, events, meta }">
<div>
<label>Bio</label>
<textarea v-bind="input" v-on="events" />
<span v-if="meta.touched && meta.error">{{ meta.error }}</span>
</div>
</div>
</field>
<button type="submit" :disabled="pristine || invalid">Submit</button>
</div>
</c-form>