did something

src/TableEditor.vue

@@ -0,0 +1,75 @@
+<template>
+  <Form v-slot="$form">
+    <Card>
+      <template #title>
+        {{ table.table_name }}
+        <Chip class="active" icon="pi pi-apple" :label="table.active ? 'active' : 'inactive'" />
+      </template>
+      <template #content>
+        <InputText name="tableName" type="text" placeholder="Table Name" v-model="tableName" />
+        <InputText name="tableLink" type="text" placeholder="Table Link" v-model="tableLink" />
+      </template>
+      <template #footer>
+        <Button label="Save" />
+        <Button label="Clear" />
+      </template>
+    </Card>
+  </Form>
+</template>
+
+<style>
+.active {
+  color: green;
+  background-color: green;
+  font-weight: 10;
+}
+
+.inactive {
+  color: red;
+}
+</style>
+
+<script setup lang="ts">
+import axios from 'axios'
+import { reactive, ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { Form } from '@primevue/forms'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import Chip from 'primevue/chip'
+
+const route = useRoute()
+const table = reactive({
+  table_name: 'default',
+  table_link: 'default',
+  active: 0,
+})
+
+const tableName = ref()
+const tableLink = ref()
+
+console.log('asdf')
+
+onMounted(() => {
+  axios.get(`http://localhost/api/tables/${route.params.id}`).then((resp) => {
+    table.table_name = resp.data.table_name
+    table.table_link = resp.data.table_link
+    table.active = resp.data.active
+    tableName.value = resp.data.table_name
+    tableLink.value = resp.data.table_link
+  })
+})
+
+watch(
+  () => route.params.id,
+  (newValue, oldValue) => {
+    console.log(newValue)
+    axios.get(`http://localhost/api/table/${newValue}`).then((resp) => {
+      table.table_name = resp.data.table_name
+      table.table_link = resp.data.table_link
+      table.active = resp.data.active
+    })
+  },
+)
+</script>