如何避免 Vue 组件中 v-model 每次更改时都调用方法？

<template>
  <v-app>
    <v-container>
      <v-text-field label="文本问题" v-model="responses.text"></v-text-field>
      <v-autocomplete
        label="随机问题"
        :items="getList()"
        v-model="responses.autocomplete"
      ></v-autocomplete>

      <p>文本 v-model: {{ responses.text }}</p>
      <p>Autocomplete v-model: {{responses.autocomplete}}</p>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data() {
      return {
        responses: {},
      }
    },

    methods: {
      getList() {
        console.log('Getting list')
        return ['value1', 'value2', 'value3']
      },
    },
  }
</script>

<template>
  <v-app>
    <v-container>
      <v-text-field label="文本问题" v-model="responses.text"></v-text-field>
      <v-autocomplete
        label="随机问题"
        :items="listItems"
        v-model="responses.autocomplete"
      ></v-autocomplete>

      <p>文本 v-model: {{ responses.text }}</p>
      <p>Autocomplete v-model: {{responses.autocomplete}}</p>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data() {
      return {
        responses: {},
        listItems: [],
      }
    },

    watch: {
      'responses.text': {
        handler(current, old) {
          if (!this.needsReload(current, old)){
            return
          }
          this.listItems = this.getList(current)
        },
        immediate: true,
      },
    },

    methods: {
      getList(current) {
        console.log('Getting list')
        // 根据 current 值获取不同的列表数据
        if (current === 'A') {
            return ['x', 'y', 'z'];
        } else if (current === 'B') {
            return ['q', 'r', 's'];
        }
        return ['value1', 'value2', 'value3'];
      },

      needsReload(current, old) {
        // 添加判断逻辑，确定是否需要重新加载数据
        // 例如，只有当 current 的第一个字母改变时才重新加载
        if (!old || current.charAt(0) !== old.charAt(0)) {
          return true;
        }
        return false;
      }
    },
  }
</script>