未设置 vuejs 选择选项默认值

Question

费用控制组件：

<template>
    <div class="expenses-controls">
        <select :value="selectedMonth" class="expense-month-select">
            <option
                v-for="(month, i) in months"
                :key="i"
                :value="month"
            >{{ month }}</option>
        </select>
        <select :value="2021" class="expense-year-select">
            <option
                v-for="(year, i) in years"
                :key="i"
                :value="year"
            >{{ year }}</option>
        </select>
    </div>
</template>

<script>
export default {
    props : {
        months        : Array,
        years         : Array,
        selectedMonth : String,
        selectedYear  : Number,
    },
}
</script>

费用卡组件：

<template>
    <panel class="expenses-card">
        <template v-slot:body>
            <expenses-controls
                :months="months"
                :years="expenseYears"
                :selectedMonth="selectedMonth"
                :selectedYear="selectedYear"
            ></expenses-controls>
        </template>
    </panel>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Panel                    from '@/components/Panel';
import moment                   from 'moment';
import Spinner                  from '@/components/Spinner';
import DataTable                from '@/components/Expenses/DataTable/Datatable';
import ExpensesControls         from '@/components/Expenses/ExpensesControls.vue';

const now    = moment();
const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
];

const fields = [
    {
        id    : 'date',
        title : 'Date',
    },
    {
        id    : 'description',
        title : 'Description',
    },
    {
        id    : 'category',
        title : 'Category',
    },
    {
        id    : 'amount',
        title : 'Amount',
    },
];

export default {
    components : {
        Panel,
        Spinner,
        DataTable,
        ExpensesControls,
    },
    data() {
        return {
            months           : months,
            selectedYear     : +now.format('YYYY'),
            selectedMonth    : now.format('MMMM'),
            fields           : fields,
            filterRowToggle  : false,
            insertRowToggle  : false,
            rows             : [],
        }
    },
    computed : {
    ...mapState({
        token              : state => state.token,
        expenses           : state => state.expensesStore.expenses,
        expenseYears       : state => state.expensesStore.expenseYears,
        initializedRequest : state => state.expensesStore.initializedRequest,
    }),
},
}
</script>

我正在尝试将此选择选项中的默认选定年份设置为当前年份 2021。目前，我在使用 selectedYear 之前硬编码了 2021 年，以查看它是否有效，但到目前为止还没有奏效。月份的默认选择确实有效，并将二月显示为默认值，因此不确定为什么第一年不起作用。

我已经包含了相关代码和屏幕截图。

任何帮助将不胜感激