Dynamically create v-model from form input field in VueJS - vue.js

Question

I want to create a form dynamically from a json response obtained from backend.
Here is the code:
<template>
<div class="container">
<div v-for="field in form">
<div v-if="field.type === 'text'">
<input type="text" :name="field.name" :placeholder="field.label"/>
</div>
<div v-else-if="field.type === 'radio'">
<div v-for="option in field.options">
<label>
<input type="radio" :name="field.name" :value="option">
<span class="text">{{ option }}</span>
</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: [
{
name: 'first_name',
label: 'First Name',
type: 'text',
},
{
name: 'last_name',
label: 'Last Name',
type: 'text',
},
{
name: 'gender',
label: 'Gender',
type: 'radio',
options: ['male','female'],
}
],
response: [], <!--I want to populate this array with form response.-->
}
}
}
</script>
Now, I don't know how many fields to be created and don't know the name. I get a different response from each different request. So I need a way to fill the response[] array with form data. The response[] array may look like this:
response: [
{
name: 'first_name',
value: 'Yeasir',
},
{
name: 'last_name',
value: 'Arafat',
},
{
name: 'gender',
value: 'male',
}
]
How can I achieve the result? It would be a great help.