Vue3: How to add a conditional class to a specific label in a table row.

I am very new to Vue 3. I have spent too long using raw JS and the transition to Vue is a challenge!

I have got the below code working fine. It is a dynamic table with checkboxes. I click a text box and I get the data relevant to the index in the array. So 99% of people would be happy. Not me - I want the label Absent/Present to have the class present applied to it, effectively giving it a green colour. If I click off the checkbox, I want the class to be removed. So far, all my efforts incorrectly apply the class to ALL the labels. I just want the labels which are true. Not that it should be relevant, but I am also using inertia. So - what am I doing wrong. I know it should be easy ...... when you know how.

Many Thanks in advance!

    <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)"
                                    >
			// HERE IS THE LABEL - THIS DOES NOT WORK CORRECTLY. // 
                                    <div v-if="true">
                                    <label  class="form-check-label"  v-bind:for="child.child_id ">Absent / Present</label> 
                                    </div>

                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>



    <script>
    export default {

        props: {
            Children:{
                Children:Array
             },
        },

        data() {
            return {
                active:false,
                inputClass: '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;
     }
    </style>