title: veevalidate reset form typescript does not reset the form
body: <p>I have a form with veevalidate. On form submit, the data is emitted to the parent, and then I need to reset the form. Following the veevalidate instructions, it should be possible to reset the form via <code>$refs</code>.</p>
  <ul>
  <li>Setup the refs with:
  <a href="https://logaretm.github.io/vee-validate/guide/forms.html#programmatic-access-with-refs" rel="nofollow noreferrer">https://logaretm.github.io/vee-validate/guide/forms.html#programmatic-access-with-refs</a></li>
  <li>Reset the form with:
  <a href="https://logaretm.github.io/vee-validate/api/validation-observer.html#methods" rel="nofollow noreferrer">https://logaretm.github.io/vee-validate/api/validation-observer.html#methods</a></li>
  </ul>
  <p>My app is in TypeScript, and following the guides, my component looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;ValidationObserver v-slot=&quot;{ handleSubmit }&quot; ref=&quot;form&quot;&gt;
              &lt;form :model=&quot;form&quot; @submit.prevent=&quot;handleSubmit(onSubmit)&quot; novalidate&gt;
                  &lt;a-input-with-validation
                          :placeholder=&quot;placeholder&quot;
                          :label=&quot;placeholder&quot;
                          auto-complete=&quot;off&quot;
                          name=&quot;comment&quot;
                          type=&quot;text&quot;
                          v-model=&quot;form.comment&quot;
                          rules=&quot;required&quot;
                  /&gt;
  
                  &lt;a-button-submit :translation-key=&quot;$t('dict.save')&quot;/&gt;
              &lt;/form&gt;
          &lt;/ValidationObserver&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
    import { Component, Prop, Vue } from 'vue-property-decorator'
    import { ValidationObserver, ValidationProvider } from 'vee-validate'
    import { OItemCommentFormChildOutput } from '@/components/organisms/forms/OItemCommentFormInterfaces'
    import AInputWithValidation from '@/components/atoms/inputs/AInputWithValidation.vue'
    import AButtonSubmit from '@/components/atoms/buttons/AButtonSubmit.vue'
  
    @Component({
      components: {
        AButtonSubmit,
        AInputWithValidation,
        ValidationObserver,
        ValidationProvider
      }
    })
    export default class OItemCommentForm extends Vue {
      @Prop()
      comment?: string
      @Prop({ default: true })
      add!: boolean
  
      $refs!: {
        form: InstanceType&lt;typeof ValidationObserver&gt;;
      }
      placeholder!: string
  
      form: OItemCommentFormChildOutput = {
        comment: ''
      }
  
      mounted () {
        this.$refs.form;
      }
  
      created () {
        this.placeholder = String(this.add ? this.$t('dict.addComment') : this.$t('dict.editComment'))
        this.form.comment = this.comment || ''
      }
  
      onSubmit () {
        this.$emit('child-output', this.form as OItemCommentFormChildOutput)
        // this.form.comment = ''
        this.$refs.form.reset()
      }
    }
  &lt;/script&gt;
  
  </code></pre>
  <p>The <code>a-input-with-validation</code> component code (from veevalidate):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;ValidationProvider
              :vid=&quot;vid&quot;
              :name=&quot;nameAlt || name&quot;
              :rules=&quot;rules&quot;
              v-slot=&quot;{ errors, valid }&quot;
      &gt;
          &lt;b-field
                  :label=&quot;label&quot;
                  :prop=&quot;name&quot;
                  v-bind=&quot;$attrs&quot;
                  :auto-complete=&quot;autoComplete&quot;
                  :type=&quot;{ 'is-danger': errors[0], 'is-success': valid }&quot;
                  :message=&quot;errors&quot;
          &gt;
              &lt;b-input
                      :name=&quot;name&quot;
                      :type=&quot;type&quot;
                      v-bind=&quot;$attrs&quot;
                      :placeholder=&quot;placeholder&quot;
                      v-model=&quot;innerValue&quot;
                      :password-reveal=&quot;type === 'password'&quot;
                      novalidate
              /&gt;
          &lt;/b-field&gt;
      &lt;/ValidationProvider&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
      .AInputWithValidation {}
  &lt;/style&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
    import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
    import { ValidationObserver, ValidationProvider } from 'vee-validate'
  
    @Component({
      components: {
        ValidationObserver,
        ValidationProvider
      }
    })
    export default class AInputWithValidation extends Vue {
      @Prop({ required: true })
      value!: any
      @Prop({ required: true })
      label!: string
      @Prop({ required: true })
      name!: string
      @Prop({ default: 'off' })
      autoComplete!: string
      @Prop({ default: 'text' })
      type!: string
      @Prop()
      nameAlt?: string
      @Prop()
      placeholder?: string
      @Prop()
      vid?: string
      @Prop()
      rules?: string
  
      innerValue = ''
  
      created () {
        if (this.value) {
          this.innerValue = this.value
        }
      }
  
      @Watch('innerValue')
      innerValueHandle (newVal) {
        this.$emit('child-output', newVal)
        this.$emit('input', newVal)
      }
  
      @Watch('value')
      valueValueHandle (newVal) {
        this.innerValue = newVal
      }
  
    }
  &lt;/script&gt;
  
  </code></pre>
  <p>The app compiles just fine, so seemingly no TS errors. On submit, the data is emitted correctly. But when I try to call the <code>reset</code> method, nothing happens. The form is not reset, and the input value stays the same. If I also force the comment within the form to an empty string, this triggers the validator to display errors.</p>
  <p>How can I reset the form after form submit and clear the contents of the form without triggering the validation errors?</p>
  <p>(moving the <code>ref=&quot;form&quot;</code> onto the form tag does not do anything either :/)</p>