migrate according to the solution

2021-09-04_composition-13-demo-starting-project/src/components/users/UserList.vue

@@ -34,10 +34,10 @@ export default {
     UserItem
   },
   props: ['users'],
+  emits: ['list-projects'],
   setup(props) {
     const enteredSearchTerm = ref('');
     const activeSearchTerm = ref('');
-    const sorting = ref(null);
 
     const availableUsers = computed(function() {
       let users = [];
@@ -50,9 +50,23 @@ export default {
       }
       return users;
     });
+
+    function updateSearch(val) {
+      enteredSearchTerm.value = val;
+    }
+
+    watch(enteredSearchTerm, function(newValue) {
+      setTimeout(() => {
+        if (newValue === enteredSearchTerm.value) {
+          activeSearchTerm.value = newValue;
+        }
+      }, 300);
+    });
+
+    const sorting = ref(null);
     const displayedUsers = computed(function() {
       if (!sorting.value) {
-        return availableUsers;
+        return availableUsers.value;
       }
       return availableUsers.value.slice().sort((u1, u2) => {
         if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
@@ -67,29 +81,16 @@ export default {
       });
     });
 
-    watch(enteredSearchTerm, function(val) {
-      setTimeout(() => {
-        if (val === enteredSearchTerm.value) {
-          activeSearchTerm.value = val;
-        }
-      }, 300);
-    });
-
-    function updateSearch(val) {
-      enteredSearchTerm.value = val;
-    }
     function sort(mode) {
       sorting.value = mode;
     }
 
     return {
       enteredSearchTerm,
-      activeSearchTerm,
-      sorting,
-      availableUsers,
-      displayedUsers,
       updateSearch,
-      sort
+      displayedUsers,
+      sort,
+      sorting
     };
   }
 };