Nuxt Dynamic V-model - vue.js

Question

I'm having difficulty binding my custom input to data(). I've tried several combinations to try to get it working and so far only the placeholder seems to work. I created an array called questions and its content is dynamically rendered to the page. On page load, my code determines if this is either a user or business account and then sets the value of the questions array based on the result which works fine. I created a test function to test if the v-model binding is working but I get an empty alert. I find it strange that the placeholder works just fine but not the v-modal bind.
<template>
<section>
<form>
<BaseInput v-for="question in questions"
v-model="question.bind" :placeholder="question.placeholder"/>
</form>
<button #click="test"></button>
</section>
</template>
<script>
import BaseInput from '../BaseInput.vue'
export default {
components: {
BaseInput,
},
data(){
return{
firstName: '',
lastName: '',
commercialName: '',
businessName: '',
questions: [],
userQuestionsArray: [
{ bind: 'firstName', placeholder: 'First Name' },
{ bind: 'lastName', placeholder: 'Last Name' },
],
businessQuestionsArray: [
{ bind: 'commercialName', placeholder: 'Commercial Name' },
{ bind: 'businessName', placeholder: 'Business Name' },
]
}
}
},
methods: {
test(){
alert(this.password)
}
},
mounted() {
if(this.$store.state.userType === 'Personal'){
this.questions = this.userQuestionsArray;
}else {
this.questions = this.businessQuestionsArray;
}
},
computed: {
userType: {
get () {
return this.$store.state.userType
}
}
}
}
</script>

Answer 1

you cant use v-mode in v-for. you must use wrapper like template or tag over each input.
<template>
<section>
<form v-for="(question, index) in questions" :key="index">
<BaseInput v-model="question.bind" :placeholder="question.placeholder"/>
</form>
<button #click="test"></button>
</section>
</template>