Vue is a fantastic JavaScript framework for front-end. This is start simple as 2-way data binding library, but nowadays it is famous and most growth JS framework.
If you using Vue JS already, maybe you face some weird problem. Today I write a case like this.

First see the object, (I get this object for from API response via axios)

"data": {
prop_1: "value 1",
prop_2: "value 2",
prop_3: {
data: {
nested_prop_1: "nested_prop_1",
nested_prop_2: "nested_prop_2",
}
}
}

Now you can conseole log your data
cosnole.log(data)
if can see all of your data show perfectly. But now, if you show the data in your component you can face some weird situation.
Now, you can print your data in your component like this.
<span> {{data.prop_1}} </span>
This looks fine. But now you can check with this:
<span> {{data.data.nested_prop_1}} </span>
You can see the error “nested_prop_1” undefiende!

Solution:
You can print your data like this:
<span v-if="data.data && data.data.nested_prop_1"> {{data.data.nested_prop_1}}</span>

Now see, your data show nicely.