edit(update) working

frontend/pages/students/edit.vue

@@ -49,65 +49,66 @@
 
     <div v-else class="text-gray-500">Loading student info...</div>
   </div>
-  </template>
+</template>
 
-  <script setup>
-  import { ref, onMounted } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
-  import { useDirectus } from '../../app/composables/useDirectus'
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDirectus } from '../../app/composables/useDirectus'
 
-  const directus = useDirectus()
-  const route = useRoute()
-  const router = useRouter()
+const { fetchCollection, updateItem } = useDirectus()
+const route = useRoute()
+const router = useRouter()
 
-  const studentId = route.query.id
-  const form = ref(null)
-  const classes = ref([])
+const studentId = route.query.id
+const form = ref(null)
+const classes = ref([])
 
-  const fetchClasses = async () => {
+const fetchClasses = async () => {
   try {
-      const { data } = await directus.items('classes').readByQuery({
+    classes.value = await fetchCollection('classes', {
       fields: ['id', 'name', 'section'],
       sort: ['name']
     })
-      classes.value = data
   } catch (err) {
     console.error('Error loading classes:', err)
   }
-  }
+}
 
-  const fetchStudent = async () => {
+const fetchStudent = async () => {
   try {
-      const student = await directus.items('students').readOne(studentId)
-      form.value = student
+    const studentData = await fetchCollection('students', {
+      filter: { id: { _eq: studentId } },
+      limit: 1
+    })
+    form.value = studentData[0] // Get first item from array
   } catch (err) {
     console.error('Error loading student:', err)
   }
-  }
+}
 
-  onMounted(async () => {
+onMounted(async () => {
   await fetchClasses()
   await fetchStudent()
-  })
+})
 
-  const submitForm = async () => {
+const submitForm = async () => {
   try {
-      await directus.items('students').updateOne(studentId, form.value)
+    await updateItem('students', studentId, form.value)
     alert('Student updated successfully!')
     router.push('/students')
   } catch (err) {
     console.error('Error updating student:', err)
     alert('Failed to update student.')
   }
-  }
-  </script>
+}
+</script>
 
-  <style scoped>
-  .input {
+<style scoped>
+.input {
   width: 100%;
   padding: 0.5rem;
   border: 1px solid #ccc;
   border-radius: 0.375rem;
-  }
-  </style>
-  
+}
+</style>