VueJS show input field conditionally - vue.js

Question

I have a button 'Add Field' and when I click it, I show a select box with several predefined options.
Now, below this select box I want to display another select box if the value selected in the select field is equal to, let's say, 'Hello', otherwise display an input field but I am struggling to achieve this.
Right now, my code looks like this:
<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: []
}
}
}
}
Right now, if I select 'Hello' from the select field, nothing happens. Appreciate your help.