How do access to vee-validate errors and clear them outside vue instance (component)

Question

I want to clear errors after i close modal or after i send data to database and i do it outside vue instance, i have tryed vm.$validator.errors.clean(), and reset but these wont work for me, any suggestions how do access them outside component?

 Vue.component('add-modal', {
    template: '#add-modal-template',
    mounted() {
        $(document).on('hidden.bs.modal','.modal', function (e) {
            $(this).remove('bs.modal');
            $(this).removeData('bs.modal');
            $(".modal-body input").val(" ");
            $('.modal-body option:first').prop('selected',true);
            console.log($(this).find('.modal-body').html());
            var myBackup = $(this).find('.modal-body').html();
            $('.modal-body').empty();
            $('.modal-body').append(myBackup);

            console.log(vm.$validator.Errors);
        });
    }
    }

    var vm = new Vue({
        el: '#app',
        data: {},
        created: function(){
            //if something is need to be loaded first
        }
    });

});


    <script type="text/x-template" id="add-modal-template">
    <!-- Modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Add new deal</h5>
                    <button type="button" class="close no-glow" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addDealForm" @submit.prevent="" v-on:submit.prevent>
                        <div class="form-group">
                                <label>Deal title</label>
                                <input type="text" name="title" class="form-control" id="Contact Person" v-validate="'required|max:15'" placeholder="Enter deal title" v-model="deal.title">
                                <span class="error text-danger" v-show="errors.has('title')">{{errors.first('title')}}</span><br>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-primary no-glow" data-dismiss="modal">Close</button>
                            <button class="btn btn-success no-glow">Save</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</script>

I provided code example

Answer 1

this in your callback is not Vue instance. You can try below techniques, assign var self=this

 Vue.component('add-modal', {
  template: '#add-modal-template',
  mounted() {
   var self = this;
   $(document).on('hidden.bs.modal', '.modal', function(e) {
    $(this).remove('bs.modal');
    $(this).removeData('bs.modal');
    $(".modal-body input").val(" ");
    $('.modal-body option:first').prop('selected', true);
    console.log($(this).find('.modal-body').html());
    var myBackup = $(this).find('.modal-body').html();
    $('.modal-body').empty();
    $('.modal-body').append(myBackup);

    console.log(self.errors);
    self.errors.clear()
   });
  }
 }