How can I prevent a method called by a Vue component from running every time the v-model changes?

I have a form that populates a number dropdown lists from an API, so I created a method that gets the list (getList()) from that API. The dropdowns are built using the Vuetify v-autocomplete component, which populate the list using the items prop and I am calling getList() from this prop.

My problem is that all of the questions share a v-model object to store the responses and every time the v-model changes, all of the autocompletes call the getList() method again to repopulate the lists. Since I have multiple questions and each is making an API call multiple times, this form is running quite slowly.

Here's an example of this:

<template>
  <v-app>
    <v-container>
      <v-text-field label="text question" v-model="responses.text"></v-text-field>
      <v-autocomplete
        label="random question"
        :items="getList()"
        v-model="responses.autocomplete"
      ></v-autocomplete>

      <p>Text 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>

Note that every time you add a new character to the text field, the getList() method is called (check the console).

My question is, is there a way to prevent the getList() method from getting called every time the v-model changes?

What I've tried:

• Giving each question its own v-model so they don't affect each other. Unfortunately this doesn't work. It looks like any time any of the data changes, the getList() method is called. See this other example:

<template>
  <v-app>
    <v-container>
      <v-text-field label="text question" v-model="text"></v-text-field>
      <v-autocomplete
        label="random question"
        :items="getList()"
        v-model="autocomplete"
      ></v-autocomplete>

      <p>Text v-model: {{ text }}</p>
      <p>Autocomplete v-model: {{autocomplete}}</p>
    </v-container>
  </v-app>
</template>

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

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

• Getting the lists in the mounted hook. While this solves this problem, I cannot use it in my case because the dropdown list of some questions are dependent on other questions. For example, if Question 1 gets a response of A, Question 2 will get list [x, y, z], but if the response is B, it will get list [q, r, s]. So I do need Question 2 to react to Qestion 1, but I don't need it to react to Question 3.

So yes, any tips on improving the performance of this component by calling getList only when it's actually needed?