diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index 7ad9aa5..bc1fa07 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -23,17 +23,11 @@
 
 <script>
   import { format } from 'date-fns'
-  import { ref } from 'vue';
+  import useEmailSelection from '../composition/useEmailSelection';
+
   export default {
     setup(){
-      let selectedEmailIds = ref(new Set(['1', '5']))
-      let toggleEmailSelection = (id) => {
-        if(selectedEmailIds.value.has(id)) {
-          selectedEmailIds.value.delete(id)
-        } else {
-          selectedEmailIds.value.add(id);
-        }
-      }
+      let {selectedEmailIds, toggleEmailSelection} = useEmailSelection();
       return {format, selectedEmailIds, toggleEmailSelection}
     },
     props: {
diff --git a/src/composition/useEmailSelection.js b/src/composition/useEmailSelection.js
new file mode 100644
index 0000000..b35433f
--- /dev/null
+++ b/src/composition/useEmailSelection.js
@@ -0,0 +1,19 @@
+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)
+    } else {
+      selectedEmailIds.value.add(id);
+    }
+  }
+
+  return {
+    selectedEmailIds,
+    toggleEmailSelection
+  }
+}
+
+export default useEmailSelection;
\ No newline at end of file