Extract a SessionFormMessage component

src/components/SessionForm.vue

@@ -2,17 +2,9 @@
   <section class="mt-8">
     <h3 class="text-2xl font-semibold mb-4">Submit a Session</h3>
 
-    <div v-if="messages.length" class="bg-green-100 border border-green-300 p-4 mb-6">
+    <session-form-message :messages="messages" class="bg-green-100 border-green-300"></session-form-message>
-      <ul class="list-disc list-inside ml-3">
-        <li v-for="message in messages" :key="message">{{ message }}</li>
-      </ul>
-    </div>
 
-    <div v-if="errors.length" class="bg-red-100 border border-red-300 p-4 mb-6">
+    <session-form-message :messages="errors" class="bg-red-100 border-red-300"></session-form-message>
-      <ul class="list-disc list-inside ml-3">
-        <li v-for="error in errors" :key="error.detail">{{ error.detail }}</li>
-      </ul>
-    </div>
 
     <form action="" @submit.prevent="submit">
       <label class="block mb-4">
@@ -32,8 +24,14 @@
 
 <script>
 import axios from 'axios'
+import _ from 'lodash'
+import SessionFormMessage from '@/components/SessionFormMessage'
 
 export default {
+  components: {
+    SessionFormMessage
+  },
+
   data () {
     return {
       errors: [],
@@ -83,7 +81,7 @@ export default {
           this.form.title = ''
         })
         .catch(error => {
-          this.errors = error.response.data.errors || []
+          this.errors = _(error.response.data.errors).map('detail').value()
         })
     }
   }

src/components/SessionFormMessage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="messages.length" class="border p-4 mb-6">
+    <ul class="list-disc list-inside ml-3">
+      <li v-for="message in messages" :key="message">{{ message }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    messages: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  }
+}
+</script>