Do the sorting within AcceptedSessionsList

vuejs/src/App.vue

@@ -1,14 +1,13 @@
 <template>
   <div id="app" class="antialiased min-h-screen font-sans bg-gray-100 text-black p-12">
     <div class="w-full max-w-2xl mx-auto">
-      <accepted-sessions-list :sessions="sortedSessions" />
+      <accepted-sessions-list :sessions="sessions" />
       <session-form @submitted="addSession($event)" />
     </div>
   </div>
 </template>
 
 <script>
-import _ from 'lodash'
 import qs from 'qs'
 import AcceptedSessionsList from '@/components/AcceptedSessionsList'
 import SessionForm from '@/components/SessionForm'
@@ -47,13 +46,6 @@ export default {
     addSession: function (session) {
       this.sessions.push(session)
     }
-  },
-
-  computed: {
-    sortedSessions: function () {
-      return _(this.sessions).sortBy(({ attributes }) => attributes.title)
-        .value()
-    }
   }
 }
 </script>

vuejs/src/components/AcceptedSessionsList.vue

@@ -4,7 +4,7 @@
 
     <div v-if="sessions.length" class="bg-white p-6 rounded-lg border">
       <ul class="-mb-3">
-        <li v-for="{ attributes } in sessions" :key="attributes.drupal_internal__nid" class="mb-3">
+        <li v-for="{ attributes } in sortedSessions" :key="attributes.drupal_internal__nid" class="mb-3">
           {{ attributes.title }}
         </li>
       </ul>
@@ -13,12 +13,20 @@
 </template>
 
 <script>
+import sortBy from 'lodash/sortBy'
+
 export default {
   props: {
     sessions: {
-      type: Object,
+      type: Array,
       required: true
     }
+  },
+
+  computed: {
+    sortedSessions: function () {
+      return sortBy(this.sessions, 'attributes.title')
+    }
   }
 }
 </script>