[Vuejs]-Vue Lifecycle: Object is undefined when binding attributes

First, if you are passing just family.plusOne, what is the result in the child?, undefined?

Secondly, may you can use a computed property like

:checked=”computedFamilyPlusOne”

computed: {
computedFamilyPlusOne: {
if(this.family.plusOne == 1){
return true
}else {
return false
}
}
}

My guess is that your family object does not exist as part of the default data binding in the data() {} method that is usually on a Vue.js component. That would mean that before the component is mounted, Vue doesn’t know the value when it compiles the template, so it appears as though the value is undefined. Then, at some point, you are probably updating ONLY that property of the family object. This means that the reactive-state of the object has never changed, so Vue.js doesn’t know that it needs to recompute the template (reactive “gotcha”).

To verify that I am correct, make sure that you use the Vue.set() method, or re-bind a new object with the updated property value for the family object.

I played around with the lifecycle phases

created() {
    this.populatePeople();
},
updated() {
    componentHandler.upgradeDom();
},

This allowed me to update the data before the DOM was loaded and following some solutions, I call componentHandler.upgradeDom() to show the switches and radio buttons correctly.