Vue.js 输入字段值在输入时不断重置？

我已经创建了一个自定义的可重用自动完成组件。我面临的问题是，每当我开始在字段（@input）中键入任何内容时，输入字段中的值就会被重置。我觉得这与debounce函数中编写的代码有关，但我不确定。Plz帮助

main.js

Vue.component('AutoComplete', {
  props: ['list','value','title'],
  data() {
    return {
      input: '',
      
    }
  },
  template: `<template>
  <div class="autocomplete">
    <input style="font-size: 12pt; height: 36px; width:1800px; " type="text"  v-model="input"  @input="handleInput"/>
     <ul v-if="input" >
      <li v-for="(item, i) in list" :key="i" @click="setInput(item)" >
         
          <template v-if="title!='manager'">
          <div class="container">
            <p>
              <b>ID:</b>
              {{item.id}}
            </p>
            <p>
              <b>Description:</b>
              {{item.description}}
            </p>
          </div>
        </template>
         <template v-else>
        <div class="container">
            <p>
              <b>ID:</b>
              {{item.id}}
            </p>
            <p>
              <b>First Name:</b>
              {{item.firstName}}
            </p>
            <p>
              <b>Last Name:</b>
              {{item.lastName}}
            </p>
          </div>
        </template>
           </li>
    </ul>
  </div>
</template>`,
  methods: {
    handleInput(e) {
      console.log('inside handleInput')
      this.$emit('input', e.target.value)
    },

    setInput(value) {
      console.log('inside setInput')
      this.input = value
      this.$emit('click', value)
    }
  },
  watch: {
    $props: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        console.log('new value is'+newValue)
        console.log('old value is'+oldValue)
        console.log('value inside handler'+this.value)
        console.log('list inside handler'+this.list)
        console.log('title inside handler'+this.title)
       this.input=this.value

      }
    }
    
}
})

我不明白为什么输入字段的值总是重置@input。请帮助我，并让我知道这是否是正确的方法

<template>
 <b-field label="Custom Action">
      <AutoComplete v-on:input="getAsyncDataAction" v-on:click="(option) => {updateRowValue('records', props.index, 'action', option.id); props.row.action = option.id}" :value="props.row.action" :list="dataAction" title='action' >
      </AutoComplete>
</b-field> 
</template>

<script>
import { viewMixin } from "../viewMixin.js";
import debounce from "lodash/debounce";
import api from "../store/api";
const ViewName = "JobDetail";
export default {
  name: "JobDetail",
  mixins: [viewMixin(ViewName)],  
  data() {
    return {    
      dataAction: [],
      isFetching: false      
    };
  },

  methods: {

 getAsyncDataAction: debounce(function(name) {
      if (!name.length) {
        this.dataAction = [];
        return;
      }
      this.isFetching = true;
      api
        .getSearchData(`/action/?query=${name}`)
        .then(response => {
          this.dataAction = [];
          response.forEach(item => {
            this.dataAction.push(item);
          });
        })
        .catch(error => {
          this.dataAction = [];
          throw error;
        })
        .finally(() => {
          this.isFetching = false;
        });
    }, 500)
}
};
</script>

computed: {
            viewData() {
                return this.$store.getters.getViewData(viewName)
            },
            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;
            }            
        },