title: Alpine JS not correctly update x-model
body: <p>I have a problem with the selected option in simple Alpine form part. My selectbox get its values from an api. The x-model is set before the fetch. The selectbox sometimes shows the correct selected value and sometimes not. Even if I'll set the value after fetch then the selected option is not (always) selected. How I'll make sure that always the correct selected value is set? </p>
  
  <p>Note: the value of selectbox 2 depends on the value who's set on the first. But if both set they must both show the correct selected value who's given at valueA and valueB.</p>
  
  <p>This is my function</p>
  
  <pre><code>&lt;script&gt;
  function alpineSelectFunction() {
      return {
          valueA: '100',
          arrayA: [],
          valueB: '101',
          arrayB: [],
          isLoading: false,
          apiUrl: "apiurl",
          fetchArrayA() {
              fetchUrl = this.apiUrl + `arrayA.json`;
              this.isLoading = true;
              fetch(fetchUrl)
                  .then(res =&gt; res.json())
                  .then(data =&gt;  this.arrayA = data.data);
              this.isLoading = false;
          },
          fetchArrayB() {
              fetchUrl = this.apiUrl + `arrayB.json?id=${this.valueA}`;
              this.isLoading = true;
              fetch(fetchUrl)
              .then(res =&gt; res.json())
              .then(data =&gt; this.arrayB = data.data);
              this.isLoading = false;
          },
          init() {
              this.fetchArrayA();
              this.fetchArrayB();
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the html</p>
  
  <pre><code>&lt;div x-data="alpineSelectFunction()" x-init="init()"&gt;
      &lt;select name="valueA" x-model="valueA" :disabled="isLoading" x-on:input.debounce.750="fetchArrayB()"&gt;
          &lt;option value=""&gt;Choose...&lt;/option&gt;
          &lt;template x-for="option in arrayA"&gt;
              &lt;option :value="option.id" x-text="option.title"&gt;&lt;/option&gt;
          &lt;/template&gt;
      &lt;/select&gt;
  
      &lt;select name="valueB" x-model="valueB" :disabled="isLoading"&gt;
          &lt;option value=""&gt;Choose...&lt;/option&gt;
          &lt;template x-for="option in arrayB"&gt;
              &lt;option :value="option.id" x-text="option.title"&gt;&lt;/option&gt;
          &lt;/template&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>