fix(components): wrap draggable in client-only

components/story/create/storyForm.vue

@@ -12,6 +12,8 @@
 	import singleChapter from "./singleChapter.vue";
 	import icon from "~/components/icon.vue";
 
+	const router = useRouter();
+
 	const props = defineProps<{
 		canDraft?: boolean;
 		endpoint: string;
@@ -47,6 +49,9 @@
 					method: "post",
 					body: values,
 				});
+				if (dat.success) {
+					await router.push(`/story/${dat.story._id}/1`);
+				}
 			}
 		} else {
 			await autoEdit(values, props.endpoint, props.endpointMethod);
@@ -107,8 +112,9 @@
 		<a-divider />
 		<!-- <test1/> -->
 		<field-array name="chapters" v-slot="{ fields, push, remove, move }">
+			<client-only>
 				<div>
-				<div v-for="(element, index) in values.chapters">
+					<div v-for="(element, index) in data.chapters">
 						<client-only>
 							<Teleport :to="`#chapter-\\[${element.uuidKey}\\]`">
 								<a-collapse v-model:active-key="expandos" collapsible="icon">
@@ -143,6 +149,8 @@
 						</client-only>
 					</div>
 				</div>
+			</client-only>
+			<client-only>
 				<draggable
 					:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }"
 					@start="drag = true"
@@ -171,6 +179,7 @@
 						<a-button data-testid="storyform.addChapter" :onClick="pushHOF(push)"> Add chapter </a-button>
 					</template>
 				</draggable>
+			</client-only>
 		</field-array>
 		<a-button type="primary" html-type="submit">{{ submitText || "Post" }}</a-button>
 		<a-button html-type="submit" v-if="canDraft" @click="() => (otherBtnInvoked = true)"> Save for Later </a-button>