<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Lower and Upper limit with Vue.js</title>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    </head>
    <body>
        <div id="lowerupper_warp">
            <select  name="lower"  v-on:change="selectLower()" v-model="lower_value">
                <option value="" >Select lower limit</option>
                <option v-for="(o, key) in lower_list" v-text="o" v-bind:value=key></option>
            </select>
            <select  name="upper" v-model="upper_value">
                <option value="" >Select upper limit</option>
                <option v-for="(o, key) in upper_list" v-text="o" v-bind:value=key></option>
            </select>
        </div>
    </body>
    <script>
        var select_prefecture = new Vue ({
            el : '#lowerupper_warp',
            data: {
                lower_value: 0,
                upper_value: 0,
                lower_list: {},
                upper_list: {},
                full_list: {
                    0: 0,
                    1 : 1,
                    2 : 10,
                    3 : 100,
                    4 : 1000,
                    5 : 10000,
                },
            },
            methods: {
                selectLower() {
                    var selected_value = this.lower_value;

                    const deleted_target = range(0, selected_value - 1);
                    this.upper_list = JSON.parse(JSON.stringify(this.full_list));

                    deleted_target.forEach((value, i) => {
                        delete this.upper_list[value];
                    });

                    if(this.lower_value > this.upper_value){
                        this.upper_value = this.lower_value;
                    }

                },
            },
            mounted() {
                this.lower_list = JSON.parse(JSON.stringify(this.full_list));
                this.upper_list = JSON.parse(JSON.stringify(this.full_list));
            }
        });

        const range = (start, end) => {
            const list = [];
            for (let i = start; i <= end; i++ ) {
                list.push(i);
            }
            return list;
        }
    </script>
</html>