From 92c429407e30bcfea5f2278d5ad5a0887b875a5f Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Tue, 17 Mar 2020 22:24:08 -0700
Subject: [PATCH] Moved "number selected"... but it doesn't update.  Why?

---
 src/components/InboxScreen.vue       | 9 +++++++--
 src/components/MailTable.vue         | 4 ----
 src/composition/useEmailSelection.js | 1 +
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/InboxScreen.vue b/src/components/InboxScreen.vue
index 3c78f5b..7579db3 100644
--- a/src/components/InboxScreen.vue
+++ b/src/components/InboxScreen.vue
@@ -1,18 +1,23 @@
 <template>
   <h1>VMail Inbox</h1>
 
+  Number selected: {{selectedEmailIds.size}}
+
   <MailTable :emails="emails" />
 </template>
 
 <script>
   import MailTable from '@/components/MailTable.vue';
-  import { ref } from 'vue';
+  import useEmailSelection from '../composition/useEmailSelection';
+
   export default {
     async setup(props, {attrs, slots}){
       let response = await fetch('/api/emails');
       let {emails} = await response.json();
 
-      return {emails}
+      let {selectedEmailIds} = useEmailSelection();
+
+      return {emails, selectedEmailIds}
     },
     components: {
       MailTable
diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index bc1fa07..55bc196 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -1,9 +1,5 @@
 <template>
   <table>
-    Number selected: {{selectedEmailIds.size}}
-    <thead>
-
-    </thead>
     <tbody>
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
         <td>
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
index b35433f..f5f46ee 100644
--- a/src/composition/useEmailSelection.js
+++ b/src/composition/useEmailSelection.js
@@ -2,6 +2,7 @@ import { ref } from 'vue';
 
 export const useEmailSelection = function(){
   let selectedEmailIds = ref(new Set(['1', '5']))
+
   let toggleEmailSelection = (id) => {
     if(selectedEmailIds.value.has(id)) {
       selectedEmailIds.value.delete(id)