how can i hide or show select list depends on its value using for loop in vue?

this code:

<b-col md="6">
 <b-form-group label="Sub Matter" label-for="sub_matter">
   <div class="d-flex align-items-center">
     <div class="w-100">
       <b-form-select v-model="matter.sub_matter" :options="subMatterOptions"
         disabled></b-form-select>
     </div>
    <div>
       <b-button variant="primary" class="ml-2" @click="addSubMatter"
         v-if="subMatters.length < 9">
         +
       </b-button>
    </div>
   </div>
  </b-form-group>
 </b-col>

will show select list (disabled) and will show the value of matter.sub_matter and if i click “+” button it will add new select list with v-model=”sub_matter_2″ and if i click “+” button it will add another select list with v-model=”sub_matter_3″ and so on until sub_matter_10

this code:

<b-col md="6" v-for="(subMatterKey, index) in subMatters" :key="index">
  <b-form-group :label="`Sub Matter ${index + 2}`" :label-for="`sub_matter_${index + 2}`"
    v-if="shouldDisplaySubMatter(subMatterKey)">
    <div class="d-flex align-items-center">
     <div class="w-100">
     <b-form-select v-model="matter[subMatterKey]"
     :options="subMatterOptions"></b-form-select>
     </div>
    <div>
    <b-button variant="danger" class="ml-2" @click="removeSubMatter(index)">
      -
     </b-button>
     </div>
    </div>
   </b-form-group>
  </b-col>

will be showing when i press “+” button from the first button

this is the script:

data() {
    return {
        subMatterOptions: [
            { value: 'SubSale (SS)', text: 'SubSale (SS)' },
            { value: 'Direct Developer (DD)', text: 'Direct Developer (DD)' },
            { value: 'Auction (A)', text: 'Auction (A)' },
            { value: 'Love and Affection (Gift)', text: 'Love and Affection (Gift)' },
            { value: 'Perfection of Transfer (POT)', text: 'Perfection of Transfer (POT)' },
            { value: 'Perfection of Charge (POC)', text: 'Perfection of Charge (POC)' },
            { value: 'Discharge of Charge (DC)', text: 'Discharge of Charge (DC)' },
            { value: 'Deed of Receipt and Reassignment (DRR)', text: 'Deed of Receipt and Reassignment (DRR)' },
            { value: 'LOAN', text: 'LOAN' },
            { value: 'Others', text: 'Others' },
        ],
        subMatters: ['sub_matter_2', 'sub_matter_3', 'sub_matter_4', 'sub_matter_5', 'sub_matter_6', 'sub_matter_7', 'sub_matter_8', 'sub_matter_9', 'sub_matter_10'],
        matter: {
            sub_matter: "",
            sub_matter_2: "",
            sub_matter_3: "",
            sub_matter_4: "",
            sub_matter_5: "",
            sub_matter_6: "",
            sub_matter_7: "",
            sub_matter_8: "",
            sub_matter_9: "",
            sub_matter_10: "",
        }
    };
},
computed: {
    filteredSubMatters() {
        return this.subMatters.filter(
            (subMatterKey) =>
                this.matter[subMatterKey] !== null && this.matter[subMatterKey] !== "",
            console.log(subMatterKey)
        );
    },
},
methods: {

    shouldDisplaySubMatter(subMatterKey) {
        console.log("subMatters",this.subMatters)
        console.log("sub_matter_2",this.matter.sub_matter_2)
        console.log("sub_matter_3",this.matter.sub_matter_3)
        console.log("sub_matter_4",this.matter.sub_matter_4)
        console.log("sub_matter_5",this.matter.sub_matter_5)
        console.log("sub_matter_6",this.matter.sub_matter_6)
        console.log("sub_matter_7",this.matter.sub_matter_7)
        console.log("sub_matter_8",this.matter.sub_matter_8)
        console.log("sub_matter_9",this.matter.sub_matter_9)
        console.log("sub_matter_10",this.matter.sub_matter_10)

        if (this.subMatters.indexOf(subMatterKey) === 0) {
            return true;
        }
        const precedingSubMatters = this.subMatters.slice(0, this.subMatters.indexOf(subMatterKey));
        for (const key of precedingSubMatters) {
            if (this.matter[key] !== '') {
                return true;
            }
        }
        return this.matter[subMatterKey] !== null;
    },


    addSubMatter() {
        if (this.subMatters.length < 9) {
            const newSubMatterKey = `sub_matter_${this.subMatters.length + 2}`;
            this.subMatters.push(newSubMatterKey);
        }
    },
    removeSubMatter(index) {
        const subMatterKey = this.subMatters[index];
        this.matter[subMatterKey] = "";
        this.subMatters.splice(index, 1);
    }, 
}

what i’m trying to do is if any of matter.sub_matter_2 until matter.sub_matter_10 has value i want to display its select list otherwise if its empty i don’t want its select list to be displayed (i can add it from “+” button)

currently all select lists are showing, i’m trying to show only select list that has value

in this function:

shouldDisplaySubMatter(subMatterKey) {
        console.log("subMatters",this.subMatters)
        console.log("sub_matter_2",this.matter.sub_matter_2)
        console.log("sub_matter_3",this.matter.sub_matter_3)
        console.log("sub_matter_4",this.matter.sub_matter_4)
        console.log("sub_matter_5",this.matter.sub_matter_5)
        console.log("sub_matter_6",this.matter.sub_matter_6)
        console.log("sub_matter_7",this.matter.sub_matter_7)
        console.log("sub_matter_8",this.matter.sub_matter_8)
        console.log("sub_matter_9",this.matter.sub_matter_9)
        console.log("sub_matter_10",this.matter.sub_matter_10)

        if (this.subMatters.indexOf(subMatterKey) === 0) {
            return true;
        }
        const precedingSubMatters = this.subMatters.slice(0, this.subMatters.indexOf(subMatterKey));
        for (const key of precedingSubMatters) {
            if (this.matter[key] !== '') {
                return true;
            }
        }
        return this.matter[subMatterKey] !== null;
    },

what am i doing wrong?

note: the above code is update form so sub_matter, sub_matter_2, sub_matter_3 and sub_matter_4 has value, these are the outputs of the console log:

console.log("subMatters",this.subMatters) value is:
subMatters 
Array(9) [ "sub_matter_2", "sub_matter_3", "sub_matter_4", "sub_matter_5", "sub_matter_6", "sub_matter_7", "sub_matter_8", "sub_matter_9", "sub_matter_10" ]

console.log("sub_matter_2",this.matter.sub_matter_2) value is: sub_matter_2 Direct Developer (DD)
console.log("sub_matter_3",this.matter.sub_matter_3) value is: sub_matter_3 Auction (A)
console.log("sub_matter_4",this.matter.sub_matter_4) value is: sub_matter_4 Love and Affection (Gift)
console.log("sub_matter_5",this.matter.sub_matter_5) value is: sub_matter_5 null
console.log("sub_matter_6",this.matter.sub_matter_6) value is: sub_matter_6 null
console.log("sub_matter_7",this.matter.sub_matter_7) value is: sub_matter_7 null
console.log("sub_matter_8",this.matter.sub_matter_8) value is: sub_matter_8 null
console.log("sub_matter_9",this.matter.sub_matter_9) value is: sub_matter_9 null
console.log("sub_matter_10",this.matter.sub_matter_10) value is: sub_matter_10 null