Moved "number selected"... but it doesn't update. Why?

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

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>

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)