Vue.js Vue vmodel 不响应 BS4 单选按钮组

我希望我只是错过了一些简单的东西，因为我已经看这个太久了，但我被难住了.

我有一个表单，输入绑定到vuejs.我有一组两个单选按钮来 Select "性别"，而且绑定工作得很好.如果单击任一单选按钮，我可以在vue组件判断器中看到数据更改.

但我试图将单选按钮更改为 bootstrap 4按钮组，但似乎无法使v-model绑定正常工作.无论我try 什么，当我单击按钮组中的任一按钮时，我的vue数据中的性别id都不会得到更新.

表单输入值是通过vue组件属性输入的，但为了简单起见，我的单选按钮/按钮组数据如下所示:

export default {
    data() {
        return {
            genders: {
                1: "Men's",
                2: "Women's"
            },
            gender_id: {
                type: Number,
                default: null
            }
        }
    }
}

以下是我的单选按钮版本代码(工作正常):

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="form-check form-check-inline" v-for="(gender, key) in genders" :key="key">
            <input type="radio"
                class="form-check-input"
                name="gender_id"
                :id="'gender_' + key"
                :value="key"
                v-model.number="gender_id">
            <label class="form-check-label" :for="'gender_' + key">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

以下是未正确绑定到vue中性别id数据的按钮组版本.

<div class="form-group">
    <label>Gender:</label>
    <div>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-secondary" v-for="(gender, key) in genders" :key="key">
                <input type="radio"
                    class="btn-group-toggle"
                    name="gender_id"
                    :id="'gender_' + key"
                    :value="key"
                    autocomplete="off"
                    v-model.number="gender_id">
                {{ gender }}
            </label>
        </div>
    </div>
</div>

我一直在使用下面的Boostrap 4文档来try 让它工作.

在按钮组的文档中，它们甚至没有包含单选输入的value属性，而在表单单选按钮的文档中，它们确实包含了该属性.

这是为了简单起见，还是单选按钮的按钮组甚至不返回选中按钮的值？

我看到其他一些帖子说按钮组不能作为单选按钮使用，但如果BS4是这样的话，那么为什么Bootstrap会像上面提到的文档中那样让按钮组带有单选按钮呢？如果无法检索选中状态，那么为什么不使用<button>而不是<label><input type=radio></label>呢？

关于我做错了什么和/或理解不正确，有什么 idea 吗？

非常感谢！