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/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: {