Use immediate watcher where needed (#689)

src/app.vue

@@ -37,16 +37,20 @@ export default defineComponent({
 
 		const { width } = useWindowSize();
 
-		watch(width, (newWidth, oldWidth) => {
-			if (newWidth === null || newWidth === 0) return;
-			if (newWidth === oldWidth) return;
+		watch(
+			width,
+			(newWidth, oldWidth) => {
+				if (newWidth === null || newWidth === 0) return;
+				if (newWidth === oldWidth) return;
 
-			if (newWidth >= 1424) {
-				if (drawerOpen.value === false) drawerOpen.value = true;
-			} else {
-				if (drawerOpen.value === true) drawerOpen.value = false;
-			}
-		});
+				if (newWidth >= 1424) {
+					if (drawerOpen.value === false) drawerOpen.value = true;
+				} else {
+					if (drawerOpen.value === true) drawerOpen.value = false;
+				}
+			},
+			{ immediate: true }
+		);
 
 		watch(
 			() => userStore.state.currentUser,

src/components/v-field-template/v-field-template.vue

@@ -57,7 +57,7 @@ export default defineComponent({
 		const { collection } = toRefs(props);
 		const { tree } = useFieldTree(collection);
 
-		watch(() => props.value, setContent);
+		watch(() => props.value, setContent, { immediate: true });
 		onMounted(setContent);
 
 		return { tree, addField, onInput, contentEl, onClick, onKeyDown, menuActive };

src/components/v-menu/use-popper.ts

@@ -26,12 +26,16 @@ export function usePopper(
 		stop();
 	});
 
-	watch(options, () => {
-		popperInstance.value?.setOptions({
-			placement: options.value.attached ? 'bottom-start' : options.value.placement,
-			modifiers: getModifiers(),
-		});
-	});
+	watch(
+		options,
+		() => {
+			popperInstance.value?.setOptions({
+				placement: options.value.attached ? 'bottom-start' : options.value.placement,
+				modifiers: getModifiers(),
+			});
+		},
+		{ immediate: true }
+	);
 
 	const observer = new MutationObserver(() => {
 		popperInstance.value?.forceUpdate();

src/components/v-menu/v-menu.vue

@@ -130,11 +130,15 @@ export default defineComponent({
 
 		const { isActive, activate, deactivate, toggle } = useActiveState();
 
-		watch(isActive, () => {
-			Vue.nextTick(() => {
-				popper.value = document.getElementById(id.value);
-			});
-		});
+		watch(
+			isActive,
+			() => {
+				Vue.nextTick(() => {
+					popper.value = document.getElementById(id.value);
+				});
+			},
+			{ immediate: true }
+		);
 
 		const { onClick, onPointerEnter, onPointerLeave } = useEvents();
 
@@ -177,13 +181,17 @@ export default defineComponent({
 				},
 			});
 
-			watch(popper, async () => {
-				if (popper.value !== null) {
-					await start();
-				} else {
-					stop();
-				}
-			});
+			watch(
+				popper,
+				async () => {
+					if (popper.value !== null) {
+						await start();
+					} else {
+						stop();
+					}
+				},
+				{ immediate: true }
+			);
 
 			return { isActive, activate, deactivate, toggle };
 

src/composables/groupable/groupable.ts

@@ -100,7 +100,7 @@ export function useGroupableParent(
 
 	// Whenever the value of the selection changes, we have to update all the children's internal
 	// states. If not, you can have an activated item that's not actually active.
-	watch(() => selection.value, updateChildren);
+	watch(selection, updateChildren);
 
 	// It takes a tick before all children are rendered, this will make sure the start state of the
 	// children matches the start selection

src/composables/use-item/use-item.ts

@@ -26,7 +26,7 @@ export function useItem(collection: Ref<string>, primaryKey: Ref<string | number
 			: `/${currentProjectKey}/items/${collection.value}`;
 	});
 
-	watch([collection, primaryKey], refresh);
+	watch([collection, primaryKey], refresh, { immediate: true });
 
 	return {
 		edits,

src/composables/use-items/use-items.ts

@@ -46,17 +46,21 @@ export function useItems(collection: Ref<string>, query: Query) {
 
 	getItems();
 
-	watch(collection, async (after, before) => {
-		if (!before || isEqual(after, before)) {
-			return;
-		}
+	watch(
+		collection,
+		async (after, before) => {
+			if (!before || isEqual(after, before)) {
+				return;
+			}
 
-		// Waiting for the tick here makes sure the query have been adjusted for the new
-		// collection
-		await Vue.nextTick();
-		reset();
-		getItems();
-	});
+			// Waiting for the tick here makes sure the query have been adjusted for the new
+			// collection
+			await Vue.nextTick();
+			reset();
+			getItems();
+		},
+		{ immediate: true }
+	);
 
 	watch([page, fields], async (after, before) => {
 		if (!before || isEqual(after, before)) {