Property or method "firstName" is not defined on the instance but referenced during render - vue.js

Question

I keep getting this warning for my inputs on my Signup.vue page. I have warning for all the four inputs in my code:
firstName
lastName
email
password
I keep getting this warning for each instance respectively.
[Vue warn]: Property or method "firstName" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
---> found in
---> <Register> at src/components/Register.vue
<App> at src/App.vue
<Root>
This is my Signup component
<template>
<div id="register">
<form>
<label for="firstName">First Name</label>
<input type="text" id="firstName" v-model="firstName"/>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" #v-model="lastName"/>
<label for="email">Email</label>
<input type="text" id="email" v-model="email"/>
<label for="password">Password</label>
<input type="text" id="password" v-model="password"/>
<button type="submit">Register!</button>
</form>
</div>
</template>
<script>
export default {
data(){
return {
form: {
firstName: '',
lastName: '',
email: '',
password: ''
}
}
},
methods: {
//methid take two parameters input or local parameter and the value of it 'firstname'-john
updateForm (input, value){
this.form[input] = value
let storedForm = this.openStorage() //extract openstorage and place in storedform
if(!storedForm) storedForm = {} //if no data, then make empty object
storedForm[input] = value //store new value
this.saveStorage(storedForm) //save changes in saveStorage function which is connected to local storage
},
mounted() {
if (localStorage.name){
this.name = localStorage.name;
}
},
//opening local storage form
openStorage(){
return JSON.pasrse(localStorage.getItem('form'))
},
//saving local storage data
saveStorage(){
localStorage.setItem('form', JSON.stringify(form))
}
},
watch: {
name(newName){
localStorage.name = newName;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

Answer 1

While rendering the view, Vue is unable to find the properties for each of your input v-models, since the fields are in the form object. You can either refer to them as form.firstName, form.lastName etc or move them out of the object in the data() section.