Update reactive usage according to guidance from Evan

src/composition/useEmailSelection.js

@@ -1,36 +1,39 @@
 import { reactive } from 'vue';
 import axios from 'axios';
 
-let emails = new Set() 
+let emailSet = new Set() 
 export const useEmailSelection = function(){
-  let emailSelection = reactive({
+  const emails = reactive(emailSet)
-    emails: emails,
+  const forSelected = (fn) => {
-    toggle(id) {
-      if(this.emails.has(id)) {
-        this.emails.delete(id)
-      } else {
-        this.emails.add(id);
-      }
-    },
-    clear(){
-      this.emails.clear();
-    },
-    addMultiple(emails) {
     emails.forEach(email => {
-        this.emails.add(email)
-      })
-    },
-    forSelected(fn){
-      this.emails.forEach(email => {
       fn(email)
       axios.put(`http://localhost:3000/emails/${email.id}`, email)
     })
+  }
+  const clear = () => {
+    emails.clear();
+  }
+
+  const emailSelection = {
+    emails: emails,
+    toggle(id) {
+      if(emails.has(id)) {
+        emails.delete(id)
+      } else {
+        emails.add(id);
+      }
     },
-    markRead(){ this.forSelected(e => e.read = true )},
+    addMultiple(emails) {
-    markUnread(){ this.forSelected(e => e.read = false )},
+      emails.forEach(email => {
-    archive(){ this.forSelected(e => e.archived = true); this.clear();},
+        emails.add(email)
-    moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
       })
+    },
+    clear: clear,
+    markRead(){ forSelected(e => e.read = true )},
+    markUnread(){ forSelected(e => e.read = false )},
+    archive(){ forSelected(e => e.archived = true); clear();},
+    moveToInbox(){ forSelected(e => e.archived = false); clear();}
+  }
 
   return { emailSelection }
 }