VueJS: Data not Updating

Question

I am making a form where user have to submit their date of birth.

The days are updated dynamically as per the month and year selected i.e. 31 days for January, 31 days for March and so on.

If the selected day is less than the days of the month generated, then the selected day will be 1.

But the problem is the selected day doesn't set to 1 when you select February after you selected day more than 29 in any of the months.

For eg: Let's say I selected Day: 31 and Month: January, and then when I selected Month: February keeping the day i.e. day 31 constant, the selected day doesn't set to 1 as selected day (31) > generated day (28).

The below code works for other months but only doesn't work for February.

Help me:

Code:

new Vue({
	el: '.field',
	data: {
    	dobYear: 1900,
        dobMonth: 'january',
        dobDay: 1,
        months: [
            {month: 'january', days: 31},
            {month: 'february', days: {reg: 28, leap: 29}},
            {month: 'march', days: 31},
            {month: 'april', days: 30},
            {month: 'may', days: 31},
            {month: 'june', days: 30},
            {month: 'july', days: 31},
            {month: 'august', days: 31},
            {month: 'september', days: 30},
            {month: 'october', days: 31},
            {month: 'november', days: 30},
            {month: 'december', days: 31},
        ],
    },
    computed: {
        filterYear() {
            let getYear = new Date().getFullYear();
            return Array.from({length: getYear - 1899}, (value, index) => index + 1900);				
        },
        filterDays() {
            const month = this.months.filter(value => value.month === this.dobMonth)[0];
            let y = this.dobYear;
            
            // Here's the problem
            if(this.dobDay > month.days) {
                this.dobDay = 1;
            }

            if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
                return month && month.days.leap;
            }else if(this.dobMonth === 'february') {
                return month && month.days.reg;
            }

            return month && month.days;
    	}
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div class="field">
    <label for="date-of-birth">Date of Birth:</label><br>
    <select v-model="dobYear">
        <option 
            v-for="year of filterYear" 
            :value="year">
            {{ year }}
        </option>
    </select>
    <select v-model="dobMonth">
        <option 
            v-for="mon of months" 
            :value="mon.month">
            {{ mon.month }}
        </option>
    </select>
    <select v-model="dobDay">
        <option v-for="day in filterDays" :value="day">{{ day }}</option>
    </select>
</div><br>

Answer 1

month.days is an object. You need to check for reg property on month.days like this.dobDay > month.days.reg

new Vue({
	el: '.field',
	data: {
    	dobYear: 1900,
        dobMonth: 'january',
        dobDay: 1,
        months: [
            {month: 'january', days: 31},
            {month: 'february', days: {reg: 28, leap: 29}},
            {month: 'march', days: 31},
            {month: 'april', days: 30},
            {month: 'may', days: 31},
            {month: 'june', days: 30},
            {month: 'july', days: 31},
            {month: 'august', days: 31},
            {month: 'september', days: 30},
            {month: 'october', days: 31},
            {month: 'november', days: 30},
            {month: 'december', days: 31},
        ],
    },
    computed: {
        filterYear() {
            let getYear = new Date().getFullYear();
            return Array.from({length: getYear - 1899}, (value, index) => index + 1900);				
        },
        filterDays() {
            const month = this.months.filter(value => value.month === this.dobMonth)[0];
            let y = this.dobYear;
            
            // Here's the problem
             
            if(this.dobDay > month.days.leap || this.dobDay > month.days) {
                
                this.dobDay = 1;
            }

            if(!((y % 4) || (!(y % 100) && y % 400)) && this.dobMonth === 'february') {
                return month && month.days.leap;
            }else if(this.dobMonth === 'february') {
                 
                return month && month.days.reg;
            }

            return month && month.days;
    	}
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div class="field">
    <label for="date-of-birth">Date of Birth:</label><br>
    <select v-model="dobYear">
        <option 
            v-for="year of filterYear" 
            :value="year">
            {{ year }}
        </option>
    </select>
    <select v-model="dobMonth">
        <option 
            v-for="mon of months" 
            :value="mon.month">
            {{ mon.month }}
        </option>
    </select>
    <select v-model="dobDay">
        <option v-for="day in filterDays" :value="day">{{ day }}</option>
    </select>
</div><br>