Get data from each select in the loop Vue.js - vue.js

Question

I have an array of products to fill (Product fields: {type:"",name:""}).
There is a variable that takes the number of products to enter. Then, for each product, a separate div is rendered with one select and one input text.
I need to get data from each such block and put them in an array.
<div v-for="n in parseInt(countProd)" :key="n">
<div>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<input placeholder="Product name">
</div>
</div>

Answer 1

Let me know if this make sense.
new Vue({
el: '#app',
data() {
return {
title: "Vue 2 app",
countProd:0,
products:[]
};
},
watch:{
countProd(newVal,old){
console.log(old,newVal)
this.products=Array.from({length:newVal},(v,i)=>{
return { type:'1', name:''}
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
No. of Products:
<input v-model="countProd" />
<div v-for="(p,n) in products" :key="n">
<div>
<select v-model="products[n].type">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input placeholder="Product name" v-model="products[n].name">
</div>
</div>
<p v-if="products.length>0">{{products}}</p>
</div>