title: How to fix value update delay in vuejs after axios request?
body: <p>I am retrieving a list of data from an api and need to fill the specific <code>&lt;select&gt;&lt;/select&gt;</code> tags, which is associated to a few radio button, with some of the data as <code>&lt;options&gt;&lt;/options&gt;</code>. The radio buttons waiting for an event (<code>@change</code>/<code>@click</code>) and executing and axios get request. Everthing works fine. I click on a radio button and retrieving the data as response (vue tools also showing the right data) but the <code>&lt;option&gt;&lt;/option&gt;</code> tags are not updating. Now when I click on another radio button, I am getting again the right data from the api BUT now the <code>&lt;option&gt;&lt;/option&gt;</code> tags are refreshing with the data from the previous response.</p>
  <p>Template</p>
  <pre><code>&lt;!-- CREATING 7 RADIO BUTTONS FOR THE CURRENT WEEK FROM MON-SUN --&gt;
  &lt;div class=&quot;wrapper&quot; v-for=&quot;item in inputDetails&quot;&gt;
      &lt;input :id=&quot;'datetime[0]['+item.labelText+']'&quot; type=&quot;radio&quot; name=&quot;datetime[0][date]&quot; v-model=&quot;formData.datetime[0].date&quot; :value=&quot;item.inputValue&quot; @change=&quot;getTimes&quot; /&gt;
  &lt;/div&gt;
  
  &lt;!-- CREATING THE TIME PICKER --&gt;
  &lt;select id=&quot;datetime[0][time]&quot; name=&quot;datetime[0][time]&quot; v-model=&quot;formData.datetime[0].time&quot;&gt;
      &lt;option selected=&quot;selected&quot;&gt;&lt;/option&gt;
      &lt;option v-for=&quot;item in selectOptionTimes[0]&quot; :value=&quot;item.value&quot;&gt;{{ item.label }}&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;!-- 
  2 MORE RADIO BUTTON SECTION AND TIME PICKER SECTIONS WITH DIFFERENT INDEXES
  &lt;input id=&quot;datetime[1][time]&quot;... 
  --&gt;
  </code></pre>
  <p>Script</p>
  <pre><code>data() {
      return {
          formData: {
              datetime: [
                  {date: '', time: ''},
                  {date: '', time: ''},
                  {date: '', time: ''},
              ]
          }
          selectOptionTimes: [],
      }
  },
  methods: {
      getTimes: function (current) {
          let instanceIndex = current.currentTarget.id.match(/(?&lt;=\[)([0-9])(?=])/g)[0]; // getting the index of the current datetime section
          axios.get('/api-url', {
              params: {
                  location_id: this.formData.location_id,
                  date: current.currentTarget.value
              }
          }).then(response =&gt; {
              this.selectOptionTimes[instanceIndex] = response.data;
          });
      }
  }
  </code></pre>
  <p>Does someone know what the problem is here?</p>