Vuejs和Bootstrap。有条件地禁用按钮组中的按钮

我一直在努力将我的一个web应用程序(jquery/php/bootstrap)迁移到 VueJS 这是一个简单的表格,上面有过滤器控件(带引导按钮组)。 Here's 一个带有fitler控件的新型密码笔 vuejs 应用程序。

在我的旧应用程序中,如果选择了按钮组中的一个按钮,它将禁用另一个按钮组中的按钮(通过添加 disabled 类以创建按钮标签)。例如,第一个按钮组是叶轮尺寸。假设您选择18英寸作为叶轮尺寸,这意味着您只能选择20.5英寸的外壳尺寸,而cage size中的其他按钮将被禁用。我使用jquery函数实现了这一点,如下所示:

 $('input:radio').change(function() {
        var senderName = this.name;
        var senderValue = this.value;
        var senderID = this.id;

        if (senderName == "imp_size"){
            switch(senderValue) {
                case "18":
                    $("#btnCageSize > label > #20\\.5").parent().removeClass("disabled");
                    $("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    //console.log('check');
                break;
                case "24":
                    $("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #28\\.5").parent().removeClass("disabled");
                    $("#btnCageSize > label > #31").prop("checked", false).parent().removeClass("active").addClass("disabled");
                break;
                case "26":
                    $("#btnCageSize > label > #20\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #28\\.5").prop("checked", false).parent().removeClass("active").addClass("disabled");
                    $("#btnCageSize > label > #31").parent().removeClass("disabled");
                    break;
...

我的问题是,我应该重用这个jquery函数,还是有一种更优雅的方法使用vuejs?我是vue的新手,学习了所有的细微差别和完成事情的方法,我只是不知道如何处理这个问题,因为我的按钮组都在使用中 v-for 循环。我甚至考虑过放弃引导,在vue库(比如vuetify)中重写整个过程。