Is this the best way to handle props that could be empty? - vue.js

Question

I have an scenario where I pass an array as a prop to a component. I then filter out the object I need based on an ID I passed as another prop. I do this with a computed property.
for example
people[
{id: '1', name: 'Frank', age: '33'},
{id: '2', name: 'Bethany', age: '22'},
{id: '3', name: 'Roscoe', age: '44'},
]
<my-component :person-id="id" :peopleArray="people[]"></my-component>
I pre-fill the component data with empty strings in case the data I'm calling is empty
data: function(){
personName: '',
personAge: ''
},
and then use the computed property to to populate that data
computed: {
getActivePersonById: function(){
return this.people.find(x => x.id === '1')
},
getActivePersonName: function(){
return this.personName = this.getActivePersonById.name
},
getActivePersonId: function(){
return this.personName = this.getActivePersonById.age
},
}
I then use the values in the HTML like so
(I'm resorting to :value because v-model was not updating from the computed property)
<label for="person_name">Name</label>
<input type="text" name="person_name :value="personName">
<label for="person_age">Age</label>
<input type="text" name="person_age :value="personAge">
Finally I need to submit any updated data by the user, I can try grab the values from data or get the values with a js query. Please let me know if there is a better way of doing this. I'd love to use the props data directly but I need to filter it by ID first.

Answer 1

Computed properties are by default getters only i.e they just return a value. To use a computed property as a v-model you should make use of computed setters.
computed: {
getActivePersonById: function(){
return this.people.find(x => x.id === '1')
},
getActivePersonName: {
get(){
return this.getActivePersonById.name
},
set(newVal){
this.personName = newVal
}
},
getActivePersonAge: {
get(){
return this.getActivePersonById.age
},
set(newVal){
this.personAge = newVal
}
}
}
Then use these computed properties as v-model for your inputs
<label for="person_name">Name</label>
<input type="text" name="person_name v-model="getActivePersonName">
<label for="person_age">Age</label>
<input type="text" name="person_age v-model="getActivePersonAge">
or else
make use of the created () lifecycle hook to initialize your data properties
created(){
this.personName = this.getActivePersonName
this.personAge = this.getActivePersonAge
}
note: in your computed properties just return values do not assign like you are doing

Answer 2

Just to add to the accepted answer. In my scenario both the computed setters and created solutions did not work.
However in a test with simpler data they did work. This was because I was initializing the component before the ID I was passing was available. I simply changed the component to only show when the ID was passed to it via v-if.
Now everything works fine. It was just a case of understanding how and when the component was initialized.