Filter within AcceptedSessionsList component

src/App.vue

@@ -26,9 +26,7 @@ export default {
   mounted () {
     const baseUrl = 'http://drupaltestcamp.docksal'
 
-    axios.get(`${baseUrl}/jsonapi/node/session`, { params: {
+    axios.get(`${baseUrl}/jsonapi/node/session`)
-      'filter[field_session_status][value]': 'accepted'
-    } })
       .then(({ data }) => {
         this.loaded = true
         this.sessions = data.data

src/components/AcceptedSessionsList.vue

@@ -2,9 +2,9 @@
   <div class="max-w-5xl mx-auto">
     <h1 class="text-4xl font-semibold mb-2">Sessions</h1>
 
-    <div v-if="!sessions.length == 0" class="bg-white p-6 rounded-lg border">
+    <div v-if="!acceptedSessions.length == 0" class="bg-white p-6 rounded-lg border">
       <ul class="-mb-3">
-        <li v-for="session in sessions" :key="session.attributes.drupal_internal__nid" class="mb-3">
+        <li v-for="session in acceptedSessions" :key="session.attributes.drupal_internal__nid" class="mb-3">
           {{ session.attributes.title }}
         </li>
       </ul>
@@ -13,12 +13,22 @@
 </template>
 
 <script>
+import _ from 'lodash'
+
 export default {
   props: {
     sessions: {
       type: Array,
       required: true
     }
+  },
+
+  computed: {
+    acceptedSessions: function () {
+      return this.sessions.filter(session => {
+        return session.attributes.field_session_status === 'accepted'
+      }).value()
+    }
   }
 }
 </script>