I have created a custom autocomplete component in my application.Iam calling this component from another vue file(page) called DepartmentDetail like this-

DepartmentDetail.vue

<b-field label="Custom Business Unit ">     <AutoComplete :method="getAsyncDataBusinessUnit" title='businessUnit'   :autocompleteData="dataBusinessUnit" viewname='DepartmentDetail'>     </AutoComplete> </b-field>   

Autocomplete.vue

<template>    <div class="autocomplete">     <input style="font-size: 12pt; height: 36px; width:1800px; " type="text"    v-model="this.objectData[this.title]" @input="getAsyncDataBusinessUnit"/> <ul v-show="isFetching" >       <li v-for="(dataBusinessUnit, i) in dataBusinessUnit" :key="i" @click="setResult(dataBusinessUnit)" >          <!-- {{ autocompleteData }} -->           <template v-if="title!='manager'">           <div class="container">             <p>               <b>ID:</b>               {{dataBusinessUnit.id}}             </p>             <p>               <b>Description:</b>               {{dataBusinessUnit.description}}             </p>           </div>         </template>          <template v-else>         <div class="container">             <p>               <b>ID:</b>               {{dataBusinessUnit.id}}             </p>             <p>               <b>First Name:</b>               {{dataBusinessUnit.firstName}}             </p>             <p>               <b>Last Name:</b>               {{dataBusinessUnit.lastName}}             </p>           </div>         </template>            </li>     </ul>   </div> </template>   <script> import { viewMixin } from "../viewMixin.js"; import schemaData from '../store/schema'; import debounce from "lodash/debounce"; import api from "../store/api"; const ViewName = "AutoComplete"; var passedview;  export default {   name: "AutoComplete",    props: {     method: {          type: Function          },         title: String,         viewname:String,         autocompleteData: {        type: Array,        required: true     }   },        data() {     return {   //   results: [],       dataBusinessUnit: [],       isFetching: false      // vignesh: this.objectData[this.title]     };   },    computed: {             viewData() {                 return this.$store.getters.getViewData('DepartmentDetail')             },             objectData() {                                return this.$store.getters.getApiData(this.viewData.api_id).data             },             sessionData() {                 return this.$store.getters.getSessionData()             },             isLoading() {                 return this.$store.getters.getApiData(this.viewData.api_id).isLoading             },             newRecord() {                 return this.$route.params.id === null;             },             getTitle() {               return this.title             }               },      mounted() {                },     methods: {        setResult(result) {                  this.updateValue(result.id,this.title);         //  localStorage.setItem(this.title,result.id );                  this.isFetching = false;       },           updateValue(newValue, fieldName) {                 var val;                  var schema = schemaData[this.viewData.schema];                                  if(typeof schema!=='undefined' && schema['properties'][fieldName]['type'] == 'date'){                     val = this.formatDate(newValue);                 } else {                     val = newValue;                 }                                  this.$store.dispatch('updateDataObjectField', {                     key: this.viewData.api_id,                     field: fieldName,                     value: val                 });             },   getAsyncDataBusinessUnit: debounce(function(name) {                      console.log('getAsyncDataBusinessUnit you typed'+name.target.value);       if (!name.target.value.length) {         this.dataBusinessUnit = [];         this.isFetching = false;         return;       }    //   this.isFetching = true;               api         .getSearchData(this.sessionData.key,`/businessunit/${name.target.value}`)         .then(response => {           this.dataBusinessUnit = [];    //cursor reset issue while typing occurs due to this line           if (!response.length)           {             console.log('inside if')           this.isFetching = false;           }            else{             console.log('inside else')             response.forEach(item => {             this.dataBusinessUnit.push(item);           });           this.isFetching = true;           }                     console.log('length of dataBusinessUnit is '+(this.dataBusinessUnit).length)           console.log('contents of dataBusinessUnit array '+JSON.stringify(this.dataBusinessUnit))         })         .catch(error => {           this.dataBusinessUnit = [];           throw error;         })         .finally(() => {          // this.isFetching = true;         });      }, 500),             },          components: {           }  }; </script> 

The issue iam facing is whenever i start to type anything into the Custom Business Unit input field, then immediately after 1-2 seconds the value gets reset(input cursor resets back to the starting position).This however does not happen if i remove the line this.dataBusinessUnit = []; in the getAsyncDataBusinessUnit function . Why is this happening? I even tried using :input instead of v-model for the input field , but i am still facing the same issue.And also second issue is when i click an existing record under DepartmentDetail page, the value for the input field coming from the store getters (this.objectData.businessUnit) is not showing up sometimes? please help