vue.js conflicts with .datepicker and removes date value after changing next v-model input

I have a form implemented with laravel and vue2 and it has some date fields where I'm using datepicker plugin. But problem is, when I go and type in the next (or any other) input, the value of the date field(s) becomes empty. I have tried many ways and looked for many questions and none helped.

See this Short Video for better understanding of the problem

input

<div class="form-group">      <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>      <input v-model="form.memo_date" class="form-control demoDate2" id="memo_date" name="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="">      <span class="text-danger" v-if="errors.memo_date">@</span>  </div>    <div class="form-group">      <label class="col-form-label col-form-label-sm" for="from_date">From Date</label>      <input class="form-control demoDate2" v-model="form.from_date" @keyup.prevent="getDuration" id="from_date" name="from_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">      <span class="text-danger" v-if="errors.from_date">@</span>  </div>    <div class="form-group">      <label class="col-form-label col-form-label-sm" for="to_date">To Date</label>      <input class="form-control demoDate2" v-model="form.to_date" @keyup.prevent="getDuration" id="to_date" name="to_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">      <span class="text-danger" v-if="errors.to_date">@</span>  </div>    <div class="form-group">      <label class="col-form-label" for="memo_no">Memo No</label>      <input class="form-control" v-model="form.memo_no" id="memo_no" type="text" name="memo_no" value="">      <span class="text-danger" v-if="errors.memo_no">@</span>  </div>  

data and mounted function

data: {     ...     ...      form: {          attachment:'',          memo_no:'',          memo_date:'',          from_date:'',          to_date:'',          duration:'',          description:'',          employees_ids:[],      },      errors:[]  },    mounted: function (){      // datepicker      $('.demoDate2').datepicker({          format: "dd-mm-yyyy",          autoclose: true,          todayHighlight: true,          orientation: "bottom auto"      });  }  

I have tried This and many more but none helped. Please help me find the issue. Any help is appreciated.

https://stackoverflow.com/questions/66991453/vue-js-conflicts-with-datepicker-and-removes-date-value-after-changing-next-v-m April 08, 2021 at 01:46AM