call the api

src/App.vue

@@ -2,36 +2,54 @@
 
 import { ref, onMounted } from 'vue'
 
+import axios from 'axios'
 import Button from 'primevue/button'
 import DataTable from "primevue/datatable"
 import Column from "primevue/column"
 
-const data = ref()
+const allTables = ref()
 const activeTables = ref()
 
 onMounted(() => {
-  data.value = [{potato: "potato", tato: "tato"}]
   activeTables.value = [
     {
       tableName: "Table-One",
       link: "vtt.cyberpunkrush.co/table-one"
     }
   ]
+
+  axios.get('http://localhost/api/tables').then((resp) => allTables.value=resp.data)
+  axios.get('http://localhost/api/active_tables').then((resp) => activeTables.value=resp.data)
 })
 
 </script>
 
 <template>
+  {{activeTables}}
+  {{allTables}}
   <div>
+
     <DataTable :exportable="false" :value="activeTables">
-      <Column field="tableName" header="Table Name"/>
-      <Column field="link" header="Table Link"/>
+      <Column field="table_name" header="Table Name"/>
+      <Column field="table_link" header="Table Link"/>
       <Column header="Close">
         <template #body="slotProps">
           <Button label="Close"/>
         </template>
       </Column>
     </DataTable>
+
+    <DataTable :exportable="false" :value="allTables">
+      <Column field="table_name" header="Table Name"/>
+      <Column field="table_link" header="Table Link"/>
+      <Column header="Close">
+        <template #body="slotProps">
+          <Button label="Close"/>
+        </template>
+      </Column>
+    </DataTable>
+
+
   </div>
 </template>