I want to fill the checkbox on page load if the value is true in the object and when the checkbox is clicked

On loading the page, I load all the notifications that are array of objects. Each object has an isRead value that is a boolean. I want the checkbox in the table to be filled with a check mark if the value isRead = true for a certain object, and if not, to leave the checkbox empty. And when the checkbox is clicked to add/remove its value in the object. If it's not a problem, I'd like you to write me the code because I'm new to vue and Typescript

`This is component : `

const notificationStore  = useNotificationStore() 
let allNotifications = ref<NotificationData[]>([])
let isNotificationRead = ref<boolean>(false)

const isDeleteDialogOpen = ref(false)
const isEditDialogOpen = ref(false)


async function getAllNotifications() {
  try {
    let response = await notificationStore.getNotifications();
    allNotifications.value = response.data.data;
    console.log(allNotifications.value)
  } catch (error) {
    throw error;
  }
  allNotifications.value.forEach((el) => {
        if(el.isRead == true){
          let isNotificationRead = true
        }
        else {
          let isNotificationRead = false
        }
    });
}

getAllNotifications()

</script>

<template>
  <Section>
<template #title>
  Notifications
</template>

<template #body>
    <el-table :data="allNotifications" style="width: 100%">
        <el-table-column label="Updated At">
            <template #default="prop">
                <el-row>
                    <span style="margin-left: 10px"></span>
                  </el-row>
            </template>
        </el-table-column>
        <el-table-column label="Message">
            <template #default="prop">
                <el-row>
                    <span style="margin-left: 10px"></span>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #default="prop">
                <el-checkbox v-model="prop.isNotificationRead"  label="Read" size="small" />
                  <el-icon >
                    <Delete @click="isDeleteDialogOpen = true" />
                  </el-icon>
            </template>
        </el-table-column>
    </el-table>
</template>
  </Section>

  <el-dialog
    v-model="isDeleteDialogOpen"
    title="Are You Sure You Want to Remove This Notification?"
    align-center
    :show-close="false"
  ><template #header="{ close, titleId, titleClass }">
        <h3 >Are You Sure You Want to Remove this Notification?</h3>
    </template>
    <span>This will remove </span>
    <span class="point-out-text"></span>
    <span> from use. This will delete all the items it contains. Are you sure you want to remove it?</span>
    <template #footer>
      <span>
        <el-row justify="end">
          <el-button type="danger" @click="">
            Yes, remove it
          </el-button>
          <el-button @click="isDeleteDialogOpen = false">
            Cancel
          </el-button>
        </el-row>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    v-model="isEditDialogOpen"
    show-close
  >
  <template #header>
  <DialogHeading>
      <template #title>Edit Notification</template>
      <template #subtitle>Edit the existing Notification. Change notification description...</template>
    </DialogHeading>
  </template>
  <template #footer>
      <span>
        <el-row justify="end">
          <el-button type="primary" @click="">
            Save
          </el-button>
          <el-button @click="isEditDialogOpen = false">
            Cancel
          </el-button>
        </el-row>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>
`
this is form of data : `data": [
        {
            "id": "6f81bfca-94a5-4cc9-93c0-48fa7d10c866",
            "userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
            "message": "Category Design you have experience in has been removed.",
            "isRead": true,
            "createdAt": "2023-01-23T09:19:48.305202",
            "updatedAt": "2023-01-24T12:25:18.412720",
            "deletedAt": null
        },
        {
            "id": "20d22d45-553f-4926-a6df-9014a277cd80",
            "userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
            "message": "Category Backend you have experience in has been removed.",
            "isRead": false,
            "createdAt": "2023-01-23T09:19:16.969621",
            "updatedAt": "2023-01-23T09:19:16.969621",
            "deletedAt": null
        },
        {
            "id": "2cca79e5-1b68-4aad-b8fc-4581e758347d",
            "userId": "8565fe35-e2e8-4d98-8c21-b06688501a63",
            "message": "Category Frontend you have experience in has been removed.",
            "isRead": false,
            "createdAt": "2023-01-23T09:19:11.622430",
            "updatedAt": "2023-01-23T09:19:11.622430",
            "deletedAt": null
        }
    ]`
`

I'm waiting for a good person to help me because I've tried really everything and I don't know how to solve it.