checkbox not rendering based on database value

I have a pop up box where one column has checkboxes, to see whether the the item has been published or not. I want the checkboxes to appear with its current state in the database while rendering. There is a field in backend called in_draft. (If its false , then the checkbox should be ticked, and vice versa). Only if a user check the blank checkbox, I want it to update to in_draft goes from True to False..I tried the following code,
but initially the checkboxes are appearing blank. When I click on any one
of them, it publised it, but after logging out and going to that pop up boxes,
all are blank…but in backend it is updated.

The code of foucs here is …..

<td class="text-center">
    <input type="checkbox" v-model="selectedReports" :value="report.id" 
                @change="handleCheckboxChange(report.id, $event.target.checked)"/>
    </td>

The async function is here:

async handleCheckboxChange(reportId, isChecked) {
      console.log("Checkbox changed:", { reportId, isChecked });
      this.isUpdating = true;
      try {
        if (isChecked) {
          console.log("Checkbox checked. Report ID:", reportId);
          
          // Check if the report is already in the selectedReports list
          if (!this.selectedReports.includes(reportId)) {
            
            this.selectedReports.push(reportId);
          } else {
            // console.log("Report already in selectedReports.");
          }

          // Publish the report if checked
          
          await this.$repository.studyReports.edit({ in_draft: false }, reportId);
          // console.log("Report published successfully.");
          this.$toast.success('Report published successfully.');
        } else {
          // console.log("Checkbox unchecked. Report ID:", reportId);
          
          // Remove the report from the selectedReports list
          if (this.selectedReports.includes(reportId)) {
            // console.log("Removing report from selectedReports.");
            this.selectedReports = this.selectedReports.filter(id => id !== reportId);
          } else {
            // console.log("Report not found in selectedReports.");
          }
        }
      } catch (error) {
        // console.error("Error in handleCheckboxChange:", error);
        this.$toast.error(`Error: ${error.response?.data?.error || error.message}`);
      } finally {
        // console.log("Resetting isUpdating flag.");
        this.isUpdating = false;
      }
    }

This is export part

export default {
  name: "ManageStudyReportsModal",
  components: { StudyReportEditForm, StudyReportForm },
  data() {
    return {
      addCollapse: null,
      editCollapse: null,
      isUpdating: false,
      studyreports: [],
      selectedReports: [], // IDs of the selected reports
      meta: {
        totalItems: 0,
        totalPages: 0,
        currentPage: 1,
        pageSize: 10,
      },
      report: null,
    };
  },