Vue Beginner Stuck - How to bind properties of elements from an array - How would you do it ?

Trying to build a students attendance app. With Axios, I have retrieved the students and their attendance (students::with attendance), and have output (v-for) the students and their attendance status on the table.

This might help with visualisation.

I'm trying to:

1. Bind and update the "status" of the students to the "action" buttons. I still have to refresh to see the updated status from the POST request of the button.

2. Hide the first 3 buttons when any of the first 3 buttons are clicked

3. Show the 4th hidden button when any of the first 3 buttons are clicked.

I am able to create the data-bindings when working with a single data object. I'm not sure what the method is in this case of the data object being an array.

I'd appreciate any pointers or advise I can get !

The code I have so far that I've been struggling with:

The HTML

<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Status</th>
      <th scope="col">Action</th>

    </tr>
  </thead>
  <tbody>
  

        <tr v-show="student.section == section | section == 'All'" v-for="student in students">
        <td scope="row">
        @{{ student.id }}
        </td>
      <td>@{{ student.first_name }} @{{ student.last_name }} </td>
      
      <td>

        <em v-for="attendance in student.attendance">
            <p v-bind:class="studentStatus(attendance.status)">
            @{{ attendance.status }}
            </p>
        </em>
        </p>
      </td>
      
      <td> 

<template v-if="statusSet(student.attendance) === 0 ">
        <button v-on:click="present( student.id , 'present')" class="btn btn-success btn-icon  btn-icon-mini btn-round">
            <i class="now-ui-icons ui-1_check"></i>
        </button>
        <button v-on:click="present( student.id , 'late')" class="btn btn-primary  btn-icon  btn-icon-mini btn-round">
            <i class="now-ui-icons ui-2_time-alarm"></i>
        </button>
        <button v-on:click="present( student.id , 'absent')" class="btn btn-danger btn-icon  btn-icon-mini btn-round">
            <i class="now-ui-icons ui-1_simple-remove"></i>
        </button>
</template>
<template v-if="statusSet(student.attendance) > 0">
        <button class="btn btn-info btn-icon  btn-icon-mini btn-round">
            <i class="now-ui-icons files_single-copy-04"></i>
        </button>
</template>



      </td>
    </tr>


  </tbody>
</table>
</div>

Vue

var app = new Vue({
    el: '#app',
    
    data: {
        students : '',
        section: 'All',
    },

    methods: {
        present :function (student_id, status) {
            var url = "/attendance/" + student_id + "/status/" + status;
            axios.post(url).then((response) =>
            {
                console.log(response);
                if (response.status === 200) {
                    //THEN trigger the updated status display on the frontend
                }
            })
        },
        studentStatus : function (status) {
            return status;
        },    
        statusSet : function (status) {
            var count = status.length;
            console.log ('main count is ' + count);
            if (count >= 1) {
                console.log ('counted ' + count);
                return 1;
            }
            if (count === 0) {
                console.log ('counted ' + count);
                return 0;
            }
        }
},
mounted: function ()
{
        axios.get('https://attendance.app/attendance').then((response) =>
        {
            this.students = response.data;
        })   
   
}

});

Thank you ! Much appreciation in advance !