Can switch between inbox and archived mail screens and keep changes in archived videos

src/App.vue

@@ -1,17 +1,17 @@
 <template>
   <div id="app">
-    <button @click="screenName = 'ArchivedScreen'" 
+    <button @click="screenName = 'MailScreenArchived'" 
-            :disabled="screenName == 'ArchivedScreen'">
+            :disabled="screenName == 'MailScreenArchived'">
       Archived View
     </button>
-    <button @click="screenName = 'InboxScreen'"
+    <button @click="screenName = 'MailScreenInbox'"
-            :disabled="screenName == 'InboxScreen'">
+            :disabled="screenName == 'MailScreenInbox'">
       Inbox View
     </button>
 
     <suspense>
       <template #default>
-        <component :is="screenName" />
+        <MailScreen :screenName="screenName" />
       </template>
       <template #fallback>
         <p>Loading...</p>
@@ -21,17 +21,15 @@
 </template>
 
 <script>
-import InboxScreen from './components/InboxScreen.vue';
+import MailScreen from '@/components/MailScreen.vue';
-import ArchivedScreen from '@/components/ArchivedScreen.vue';
 
 export default {
   name: 'App',
   components: {
-    InboxScreen,
+    MailScreen
-    ArchivedScreen
   },
   setup(){  
-    let screenName = 'InboxScreen';
+    let screenName = 'MailScreenInbox';
     return {screenName}
   }
 };

src/components/MailScreen.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <component :is="screenName" :emails="emails" />
+  </div>
+</template>
+
+<script>
+  import MailScreenArchived from '@/components/MailScreenArchived.vue';
+  import MailScreenInbox from '@/components/MailScreenInbox.vue';
+  import { ref } from 'vue';
+
+  export default {
+    async setup(){
+      let response = await fetch('/api/emails');
+      let {emails} = await response.json();
+
+      emails = ref(emails);
+
+      return {emails};
+    },
+    components: {
+      MailScreenArchived,
+      MailScreenInbox
+    },
+    props: {
+      screenName: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/MailScreenArchived.vue

@@ -10,16 +10,12 @@
   import MailTable from '@/components/MailTable.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
 
-  import { computed, ref } from 'vue';
+  import { computed } from 'vue';
 
   export default {
-    async setup(){
+    async setup({emails}){
-      let response = await fetch('/api/emails');
-      let {emails} = await response.json();
-
-      emails = ref(emails);
       let archivedEmails = computed(() => {
-        return emails.value.filter(e => e.archived)
+        return emails.filter(e => e.archived)
       })
 
       return {archivedEmails}

src/components/MailScreenInbox.vue

@@ -10,16 +10,12 @@
   import MailTable from '@/components/MailTable.vue';
   import BulkActionBar from '@/components/BulkActionBar.vue';
 
-  import { computed, ref } from 'vue';
+  import { computed } from 'vue';
 
   export default {
-    async setup(){
+    async setup({emails}){
-      let response = await fetch('/api/emails');
-      let {emails} = await response.json();
-
-      emails = ref(emails);
       let inboxEmails = computed(() => {
-        return emails.value.filter(e => !e.archived)
+        return emails.filter(e => !e.archived)
       })
 
       return {inboxEmails}