In my experience, using a Vue form on a regular HTML <input> element allows validation to work as expected. However, when I switch to using the <md-input> element, the validation no longer functions and an error message is displayed:
Element with v-model not found
Below is a working example with the <input> element:
<vue-form :state="formState" @submit.prevent="onSubmit">
<validate>
<label>Name</label>
<input v-model="model.name" required name="name" />
<field-messages name="name">
<div>Success!</div>
<div slot="required">Name is a required field</div>
</field-messages>
</validate>
<button type="submit">Submit</button>
</vue-form>
However, here is an example where validation does not work with the <md-input> element:
<vue-form :state="formState" @submit.prevent="onSubmit">
<validate>
<md-input-container md-inline>
<label>Name</label>
<md-input v-model="model.name" required name="name"></md-input>
</md-input-container>
<field-messages name="name">
<div>Success!</div>
<div slot="required">Name is a required field</div>
</field-messages>
</validate>
<button type="submit">Submit</button>
</vue-form>