Use the Options API for two components

src/components/MailScreenArchived.vue

@@ -10,19 +10,21 @@
   import MailTable from '@/components/MailTable.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
 
-  import { computed } from 'vue';
-
   export default {
-    async setup({emails}){
-      let archivedEmails = computed(() => {
-        return emails.filter(e => e.archived)
-      })
-
-      return {archivedEmails}
-    },
     components: {
       MailTable,
       BulkActionBar
+    },
+    computed: {
+      archivedEmails(){
+        return this.emails.filter(e => e.archived)
+      }
+    },
+    props: {
+      emails: {
+        type: Object,
+        required: true
+      }
     }
   }
 </script>

src/components/MailScreenInbox.vue

@@ -10,19 +10,21 @@
   import MailTable from '@/components/MailTable.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
 
-  import { computed } from 'vue';
-
   export default {
-    async setup({emails}){
-      let inboxEmails = computed(() => {
-        return emails.filter(e => !e.archived)
-      })
-
-      return {inboxEmails}
-    },
     components: {
       MailTable,
       BulkActionBar
+    },
+    computed: {
+      inboxEmails(){
+        return this.emails.filter(e => !e.archived)
+      }
+    },
+    props: {
+      emails: {
+        type: Object,
+        required: true
+      }
     }
   }
 </script>