diff --git a/src/components/MailScreenArchived.vue b/src/components/MailScreenArchived.vue
index d8429ef..b0a5cea 100644
--- a/src/components/MailScreenArchived.vue
+++ b/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>
diff --git a/src/components/MailScreenInbox.vue b/src/components/MailScreenInbox.vue
index 395dd73..0518d06 100644
--- a/src/components/MailScreenInbox.vue
+++ b/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>