Modal can close + opening modal marks email as read

src/components/MailTable.vue

@@ -4,7 +4,7 @@
       <tr v-for="email in emails" 
           :key="email.id"
           :class="[email.read ? 'read' : '']"
-          @click="openedEmail = email"
+          @click="openEmail(email)"
           class="clickable">
         <td>
           <input type="checkbox" 
@@ -20,7 +20,7 @@
     </tbody>
   </table>
 
-  <MailViewModal :email="openedEmail" />
+  <MailViewModal :email="openedEmail" :closeModal="() => {openedEmail = null;}"/>
 </template>
 
 <script>
@@ -34,7 +34,12 @@
       let {emailSelection} = useEmailSelection();
       let openedEmail = ref();
 
-      return {format, emailSelection, openedEmail}
+      let openEmail = function(email) {
+        openedEmail.value = email;
+        openedEmail.value.read = true;
+      }
+
+      return {format, emailSelection, openedEmail, openEmail}
     },
     props: {
       emails: {

src/components/MailViewModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="modal" v-if="email">
-    <div class="overlay"></div>
+    <div class="overlay" @click="closeModal()"></div>
     <div class="modal-card">
       From: {{email.from}}<br>
       Subject: <strong>{{email.subject}}</strong>
@@ -15,9 +15,9 @@
       email: {
         type: Object
       },
-      isOpened: {
+      closeModal: {
-        type: Boolean,
+        type: Function,
-        default: true
+        required: true
       }
     }
   }