model - Alpine JS が x-model を正しく更新しない

Question

単純なアルパイン フォーム パーツで選択したオプションに問題があります。私の選択ボックスは、API から値を取得します。x-model はフェッチの前に設定されます。選択ボックスには、選択された正しい値が表示される場合と表示されない場合があります。フェッチ後に値を設定しても、選択したオプションは (常に) 選択されません。常に正しい選択値が設定されていることを確認するにはどうすればよいですか?

注: selectbox 2 の値は、最初に設定された値によって異なります。ただし、両方が設定されている場合は、valueA と valueB で指定された正しい選択値を両方とも表示する必要があります。

これが私の機能です

<script>
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 => res.json())
                .then(data =>  this.arrayA = data.data);
            this.isLoading = false;
        },
        fetchArrayB() {
            fetchUrl = this.apiUrl + `arrayB.json?id=${this.valueA}`;
            this.isLoading = true;
            fetch(fetchUrl)
            .then(res => res.json())
            .then(data => this.arrayB = data.data);
            this.isLoading = false;
        },
        init() {
            this.fetchArrayA();
            this.fetchArrayB();
        }
    }
}
</script>

これはhtmlです

<div x-data="alpineSelectFunction()" x-init="init()">
    <select name="valueA" x-model="valueA" :disabled="isLoading" x-on:input.debounce.750="fetchArrayB()">
        <option value="">Choose...</option>
        <template x-for="option in arrayA">
            <option :value="option.id" x-text="option.title"></option>
        </template>
    </select>

    <select name="valueB" x-model="valueB" :disabled="isLoading">
        <option value="">Choose...</option>
        <template x-for="option in arrayB">
            <option :value="option.id" x-text="option.title"></option>
        </template>
    </select>
</div>