Two refactors: one to make it reactive, the other to make it work

The one that made it work was storing `ids` outside of the useEmailSelection function.  That makes it shared between the multiple uses of the useEmailSelection function.

src/components/InboxScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
-
+  
-  Number selected: {{selectedEmailIds.size}}
+  <p>Number selected: {{emailSelection.ids.size}}</p>
 
   <MailTable :emails="emails" />
 </template>
@@ -15,9 +15,9 @@
       let response = await fetch('/api/emails');
       let {emails} = await response.json();
 
-      let {selectedEmailIds} = useEmailSelection();
+      let {emailSelection} = useEmailSelection();
 
-      return {emails, selectedEmailIds}
+      return {emails, emailSelection}
     },
     components: {
       MailTable

src/components/MailTable.vue

@@ -1,11 +1,13 @@
 <template>
+  <p>Number selected: {{emailSelection.ids.size}}</p>
+
   <table>
     <tbody>
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
         <td>
           <input type="checkbox" 
-                  :checked="selectedEmailIds.has(email.id)"
+                  :checked="emailSelection.ids.has(email.id)"
-                  @click="toggleEmailSelection(email.id)" />
+                  @click="emailSelection.toggle(email.id)" />
         </td>
         <td>{{email.from}}</td>
         <td>
@@ -23,8 +25,8 @@
 
   export default {
     setup(){
-      let {selectedEmailIds, toggleEmailSelection} = useEmailSelection();
+      let {emailSelection} = useEmailSelection();
-      return {format, selectedEmailIds, toggleEmailSelection}
+      return {format, emailSelection,}
     },
     props: {
       emails: {

src/composition/useEmailSelection.js

@@ -1,19 +1,21 @@
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
+let ids = new Set(['1', '5']);
 export const useEmailSelection = function(){
-  let selectedEmailIds = ref(new Set(['1', '5']))
 
-  let toggleEmailSelection = (id) => {
+  let emailSelection = reactive({
-    if(selectedEmailIds.value.has(id)) {
+    ids: ids,
-      selectedEmailIds.value.delete(id)
+    toggle: function(id) {
-    } else {
+      if(this.ids.has(id)) {
-      selectedEmailIds.value.add(id);
+        this.ids.delete(id)
+      } else {
+        this.ids.add(id);
+      }
     }
-  }
+  })
 
   return {
-    selectedEmailIds,
+    emailSelection,
-    toggleEmailSelection
   }
 }