VueJS показывает поле ввода условно

У меня есть кнопка «Добавить поле», и когда я нажимаю на нее, я показываю поле выбора с несколькими предопределенными параметрами.

Теперь под этим полем выбора я хочу отобразить другое поле выбора, если значение, выбранное в поле выбора, равно, скажем, «Привет», в противном случае отобразить поле ввода, но я изо всех сил пытаюсь достичь этого.

Прямо сейчас мой код выглядит так:

<div v-for = "option in folder.salary.fields" :key = "option.id">
    <b-form-group label = "Select field" label-for = "salaryOptionField">
       <select
                v-model = "folder.salary.fields.name"
                value-field = "id"
                @change = "onOptionSelected"
        >
            <option :value = "null" disabled>Select type</option>
            <option v-for = "(type, key) in salaryFields" :value = "key">
                {{ salaryFields[key] }}
            </option>
        </select>
        <template v-if = "folder.salary.fields.name === 'Hello'">
            <b-form-group label = "Name" label-for = "name">
                <input type = "text"
                       name = "name"
                       v-model = "folder.salary.benefits.a"
                       required/>
            </b-form-group>
        </template>
    </b-form-group>
</div>

<b-btn @click = "addNewSalaryField" variant = "primary">Add Field</b-btn>

addNewSalaryField(){
    this.folder.salary.fields.push({
        name: '',
          amount: ''
             })
}

data() {
     return {
        folder: {
          pages: [],
             salary: {
               fields: [],
               benefits: []
             }
           }
        }
    }

Прямо сейчас, если я выберу «Привет» в поле выбора, ничего не произойдет. Ценю вашу помощь.