onChange maximum tags on two select Vuejs

Question

I have a problem with my Vuejs application, I have two inputs: 1- First input is to select the Type of 'room' 2- Second input is to to select the users maximum in the room

The problem, for example I select room 4; the users maximum is 4 people, but if I go back to my first input and I select room 3, the second input always keeps the values, I want to do a reset once the first input is changed.

this is my code:

<div class="form-group">
                    <label class="control-label">
                        Rooms
                    </label>
                    <multiselect
                        :options="roomTypes"
                        v-model="rooms.roomType"
                        track-by="id"
                        label="title"
                        :searchable="true"
                        :allow-empty="true"
                        select-label=""
                        selected-label=""
                        deselect-label=""
                        placeholder=""
                        autocomplete="false"
                        name="room_type_id"

                    ></multiselect>
                </div>
                <div class="form-group">
                    <label class="control-label">
                        Users
                    </label>
                    <multiselect
                        :options="members"
                        v-model="rooms.members"
                        track-by="name"
                        clearable
                        label="name"
                        :multiple="true"
                        :searchable="true"
                        :allow-empty="true"
                        select-label=""
                        selected-label=""
                        placeholder=""
                        autocomplete="false"
                        :max="rooms.roomType.id-1"
                        name="member_id"
                    ></multiselect>
                </div>


    <script>
    let foo = new Vue({
        el: '#vue-app',
        data: {
            roomTypes: @json($roomType),
            rooms: @json($rooms),
            members: @json($members),
        },
        methods: {},
    });
</script>

How I can do that please.

Thank you

Answer 1

You can use watch to detect a value change, here's an example:

let foo = new Vue({
    el: '#vue-app',
    data: {
        roomTypes: @json($roomType),
        rooms: @json($rooms),
        members: @json($members),
    },
    methods: {},
    watch: {
        ['rooms.roomType']() {
            this.rooms.members = 1;
        }
    }
});