What is a proper way to deal with Vue.js props that from the response of backend - vue.js

Question

I am wondering that what is a proper way to deal with props in Vue.js if the prop is from the response of backend?
Ok, let's say the child component has a prop called person. a name is in person object.
<template>
{{ person.name }}
<template>
<script>
export default {
name: 'ChildComponent',
props:['person'],
created(){
this.getName();
},
data(){return{name:''}},
methods:{
getName(){
this.name = this.person.name;
}
}
</script>
The parent component is like this
<template>
<ChildComponent :person="person"></ChildComponent>
<template>
<script>
export default {
name: 'ParentComponent',
created(){
this.getPerson();
}
data(){
return {
person: null
}
},
methods:{getPerson(){
// send request to server or api then update name
sendrequest().then(person => { this.person = person});
}}
</script>
At first, before the get the response, there will be a warning can't get name from person.
I know 2 methods to handle this:
<ChildComponent :person="person" v-if="person"></ChildComponent>
watch person prop in, every time the person is changed, rerun the getName() method in childcomponent or set name as a computed attribute.
So here is the question again, are they the proper way to handle this? Is there still some other methods like using Vuex?
Thx

Answer 1

It really depends on your use case, if you don't want to show the person until it is ready then v-if seems like the right way to go.
If you want to display something until the person object is ready you have 2 options:
Give person a default name, or init it with an empty name
show a loading component until person is ready

Answer 2

This is not vue warning. Basically this is javascript error TypeError: Cannot read property 'name' of null, which vue may show you as warning. Your 1 variant is okey. Same as <div v-if="person">{{person.name}}</div> in your child. Also you may fill your person with some thing like
return {
person: {name: 'loading...'}
}
and in your parent
mounted: function () {
// your person will be loaded when component mounted
this.getPerson()
}