lists page now pulls real data

app/pages/lists/index.vue

@@ -2,19 +2,29 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
+import type {List} from "~/types/list";
+
+const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
+
+const refreshLists = () => {
+  refresh()
+}
+
 </script>
 
 <template>
   <PageTitle title="Lists"/>
 
   <div class="content">
-    <CreateListForm/>
+    <CreateListForm @refreshLists="refreshLists"/>
 
     <div class="w-full flex flex-col gap-5">
       <h2 class="text-2xl font-bold">Your Lists</h2>
       <ul class="w-full flex flex-col gap-3">
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink to="lists/1">List 1</NuxtLink>
+        <li v-for="list in lists"
+            :key="list.id"
+            class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
+          <NuxtLink :to="`lists/${list.id}`">{{ list.name }}</NuxtLink>
         </li>
       </ul>
     </div>