feat(home): Fetch data from api

Tried out how to fetch data from my REST API

src/views/Home.vue

@@ -1,45 +1,10 @@
-<script>
-let data = [
-    {
-        "Name": "Test",
-        "Organizer": "Niku3",
-        "Event": "Test3"
-    }
-]
+<script setup>
+import { ref } from 'vue'
 
-function fetchEvents() {
-    console.log(import.meta.env.VITE_BACKEND_URI)
-    fetch(`${import.meta.env.VITE_BACKEND_URI}/api/v1/public/event`)
-    .then((response) => {
-        console.log(response.json())
-    })
-}
+const events = ref([])
 
-function test() {
-    this.data = 'outside'
-}
+fetch(`${import.meta.env.VITE_BACKEND_URI}/api/v1/public/event`).then(response => response.json()).then(data => events.value.push(data[0]))
 
-export default {
-    data() {
-        return {
-            data
-        }
-    },
-
-    created() {
-        fetchEvents()
-    },
-
-    methods: {
-        changeText() {
-            this.data = 'another Test'
-        },
-        increment() {
-            this.data++
-        },
-        test
-    }
-}
 </script>
 
 <template>
@@ -51,7 +16,7 @@ export default {
                 <th>Organizer</th>
                 <th>Event</th>
             </tr>
-            <tr v-for="event in data">
+            <tr v-for="event in events">
                 <td>{{ event.Name }}</td>
                 <td>{{ event.Organizer }}</td>
                 <td>{{ event.Event }}</td>