How to apply a class to a specific label in a row based on truthy value - vuejs3

Question

I'm new to Vue 3. I have a table with rows. See screenshot below. Each row has a checkbox and a label in it. All I want to do is upon initial loading of the page view, have the correct class apply to the label depending on whether the child.status of that row is true-thy or not. Child status true is present. False = absent. Problem: when I initially load the page view all the labels are green regardless whether the child.status false or true.
Currently the Vue 3 code I have got so far works great, except for initial load. If I check the checkbox, I get the data I need and the label gets its green background. If I uncheck a checkbox, the green class disappears. Check it again and the green background reappears - Great. All's well except for initial page load where all the labels are green.
To help you understand I included a screenshot. You will notice behind each label there is a 1 or 0 to indicate whether it is truthy are not. You will see that even the false ones are green.
<template>
<div class="container">
<h5 class="heading ml-4">Children Absent / Present</h5>
<div class="border_charts">
<table class="table ">
<thead>
<tr class="col-4">
<th class="tableHeading col-4">First Name</th>
<th class="tableHeading col-4">Last Name</th>
<th class="tableHeading col-4 ">Absent / Present</th>
</tr>
</thead>
<tbody>
<tr v-for="child in Children" :key="child.child_id">
<td class="col-4"><a :href="'/getchild/'+ child.child_id">{{child.childFirstName}}</a></td>
<td class="col-4"> {{child.childLastName}}</td>
<td class="col-4">
<div class="form-check form-switch" >
<input
type="checkbox"
class="form-check-input"
role="switch"
:id="child.child_id"
v-model="child.status"
:true-value="1"
:false-value="0"
#change="updateChild(child)"
>
<label
class="form-check-label"
v-bind:for="child.child_id "
:class="{present:child.status}"
:true-value="1"
:false-value="0"
> {{ child.status ? absentPresent : absentPresent }}
</label>
{{child.status}}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: {
Children:{
Children:Array
},
},
data() {
return {
active:false,
inputClass: 'present',
absentPresent:'Absent/Present'
}
},
methods:{
updateChild(child){
this.changedChild = child;
console.log( this.changedChild);
this.inputClass = 'present'
this.active = ! this.active
},
},
}
</script>
<style scoped>
.present{
background-color: #5ba17a;
border-radius:0.25rem;
width:auto;
color:white;
text-align: center;
margin: 2px;
padding: 0px 5px 0px 5px;
}
.absent{
width:auto;
color:darkblue;
text-align: center;}
</style>

Answer 1

My guess is that child.status is initially loaded as string, so it is '0' instead of 0, and as with any non-empty string, Boolean('0') is true.
Check if you need to convert the values to numbers after loading, or if you can change the data source to send you numbers instead of strings.