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)"
-                  @click="toggleEmailSelection(email.id)" />
+                  :checked="emailSelection.ids.has(email.id)"
+                  @click="emailSelection.toggle(email.id)" />
         </td>
         <td>{{email.from}}</td>
         <td>
@@ -23,8 +25,8 @@
 
   export default {
     setup(){
-      let {selectedEmailIds, toggleEmailSelection} = useEmailSelection();
-      return {format, selectedEmailIds, toggleEmailSelection}
+      let {emailSelection} = useEmailSelection();
+      return {format, emailSelection,}
     },
     props: {
       emails: {