Dynamically added HTML element after click event - vuejs2

Question

I don't know how to add dynamic content in my Vue js 2 app. I'd like to add many div elements after clicking on a button. THis div should have input and after clicking on a Save button all input texts inside dynamically created divs should be sent to backend (so I use model inside my template).
<div v-if="!this.spinnerVisibleForCorrectiveActions">
<div>
<table class="p-2 table-cell">
<tr class="font-weight-bold">
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
ID
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
DZIAŁANIE
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2">
SZCZEGÓŁY
</div>
</td>
</tr>
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
</table>
<button class="addAction p-3 mb-2 bg-secondary text-white w-100 bg-info btn btn-success">NAdd new action</button>
<br>
</div>
How to add dynamically (multiple times) something like this and additionally to have the possibility to get all data from my dynamically created inputs after clicking on a button:
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>

Answer 1

Ok, the answer in my case is very simple - I have to only add an empty object to my correctiveActions array:
<button class="addAction p-2 mb-2 bg-secondary text-white w-100 bg-info btn btn-success" #click="addNewAction">Nowe
działanie
</button>
and next:
methods:{
addNewAction() {
this.correctiveActions.push
({
id: undefined,
incidentId: this.incidentId,
orderNumber: this.getNextOrderNumber(),
action: undefined,
recommendations: undefined
});
},
}