<template>
  <v-form ref="form" v-model="valid" lazy-validation>
    <v-flex xs12>
      <v-text-field
        :rules="[rules.required]"
        label="Firstname"
        v-model="firstname"
        @update:error='doSomething'
        required
      ></v-text-field>
    </v-flex>
    <v-btn
      :disabled="!valid"
      color="success"
      @click="validate"
    >
      Submit
    </v-btn>
  </v-form>
</template>

<script>
export default {
  data () {
    return {
      valid: true,
      firstname: '',
      rules: {
        required: v => !!v || 'Field is required.'
      }
    }
  },
  methods: {
    doSomething (error) {
      console.log({ error })
    },
    validate () {
      if (this.$refs.form.validate()) {
        console.log('submited!!')
      }
    }
  }
}
</script>