Split Slug from Creator

frontend/src/views/creators/CreateCreator.vue

@@ -19,7 +19,7 @@ const creatorProfileStore = useCreatorProfileStore();
 const userProfileStore = useUserProfileStore();
 
 function handleCreatorNameReservationIdChanged($event) {
-  creatorNameReservationId.value = $event.value
+  creatorNameReservationId.value = $event
 }
 
 function cancel () {
@@ -70,7 +70,7 @@ async function createAccount() {
       <div class="card-content">
         <name-editor
             v-model:name="creatorName"
-            creator-name-reservation-id="creatorNameDirty"
+            creator-name-reservation-id="creatorNameReservationId"
             @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
         ></name-editor>
       </div>

frontend/src/views/creators/NameEditor.vue

@@ -22,7 +22,7 @@ const isReserved = computed(() => reservationState.value === 'reserved');
 
 const isOperationPending = ref(false);
 const reservationState = ref(null);
-const reservationId = ref(null);
+const reservationId = ref(v7());
 
 let timeout = null;
 const handleInput = () => {
@@ -40,21 +40,19 @@ const checkNameAvailability = async () => {
   }
 
   try {
-    const id = v7();
     isOperationPending.value = true;
     reservationState.value = "loading";
     await client.post(
         `/api/creators/@${encodeURIComponent(name.value)}/reserve`,
-        {reservationId: id}
+        {reservationId: reservationId.value}
     );
     reservationState.value = "reserved";
-    reservationId.value = id;
   } catch (error) {
     reservationState.value = "unavailable"; // Handle API failure case
     reservationId.value = undefined;
   } finally {
-    emits('update:name', name);
-    emits('update:creatorNameReservationId', reservationId);
+    emits('update:name', name.value);
+    emits('update:creatorNameReservationId', reservationId.value);
     isOperationPending.value = false;
   }
 };