vee-validate reset

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="app">
      <my-form></my-form>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
    <script src="https://rawgit.com/logaretm/vee-validate/2.0.0-beta.25/dist/vee-validate.js"></script>
    
    <script src="my-form.js"></script>
    <script src="app.js"></script>
  </body>

</html>

Vue.component('my-form', {
  data() {
    return {
      message: 'test'
    }
  },
  methods: {
    reset() {
      this.message = '';
      this.$nextTick(() => {
        this.fields.reset();
        this.errors.clear();
      });
    }
  },
  template: `
    <div>
      <input
        type="text"
        v-model="message"
        v-validate="'required'"
        name="message"
        :class="{ 'has-errors': errors.has('message') }" />
      <br />
      <button
        type="button"
        @click="reset">Cancel</button>
    </div>
  `
});

body {
  width: 300px;
  margin: 50px auto;
  padding: 2em;
  box-shadow: 0 0 100px #CCC;
}

input,
button {
  font-size: 1.5em;
}

.has-errors {
  border: 1px solid red;
  outline: 1px solid red;
}

Vue.use(VeeValidate, {
  enableAutoClasses: true
});


new Vue({
  el: '#app'
});