V3 with vue, smart select don't update when option change

Questions
1

Hi, I have a form with two select, when first select’s value change, the second select’s option will change. for example: when first select’s value is A, the second select’s option will be A, B, C; when first select’s value change to B, the second select’s option will be D, E, F。

The second select is using framework7’s smart-select, and its option is changed through vue data. if I don’t change the first select, everything works great, but when I change the first select’s value to B, the smart-select still show A, B, C, and can’t work.

What I need to do? Below is the code:

<div class="list">
<ul>
<li class="item-content item-input">
    <div class="item-inner">
        <div class="item-title item-label">First Select</div>

        <div class="item-input-wrap item-link smart-select smart-select-init"
            data-open-in="popup" data-searchbar="true" data-close-on-select="true">
            
            <select name="computerRoom" v-model="submitData.computerRoomId">
                <option v-for="computerRoom of computerRoomList"
                v-bind:key="computerRoom.id"
                v-bind:value="computerRoom.id"
                v-bind:selected="computerRoom.isSelected">
                {{ computerRoom.name }}
                </option>
            </select>

            <div class="item-inner">
                <div class="item-title"></div>
            </div>   
        </div>

    </div>
</li>

<li class="item-content item-input">
    <div class="item-inner">
        <div class="item-title item-label">Second Select</div>

        <div class="item-input-wrap item-link smart-select smart-select-init" 
            data-open-in="popover">
            
            <select name="computerRoomArea" 
                v-model="submitData.areaIdList"
                multiple>
                <option v-for="computerRoomArea of computerRoomAreaList"
                v-bind:key="computerRoomArea.id"
                v-bind:value="computerRoomArea.id"
                v-bind:selected="computerRoomArea.isSelected">
                {{ computerRoomArea.name }}
                </option>
            </select>

            <div class="item-inner">
                <div class="item-title"></div>
            </div>   
        </div>
    </div>
</li>
</ul>
</div>

In vue’s js part, when submitData.computerRoomId change, it will change computerRoomAreaList to change the second select’s option, in chrome’s developer panel, I see the option change, but the smart-select popover not update, still show previous option.

What should I do to make the smart-select popover update? Please help resolve.