Race condition when setting initial value of a toggle component

Questions
1

Hi! In my application, I am using the <f7-toggle> component and need to set its initial state based on a value from my Firebase database. The component is defined as follows:

<f7-toggle :checked="publicList" @change="togglePublic"></f7-toggle>

public is a computed property that depends on a prop value docData.public. It is defined as follows:

const publicList = computed(() => { return props.docData.public; });

The @change event triggers the togglePublic function, which in turn updates the Firebase database:

async function togglePublic() {
     const docupdateRef = doc(db, "list", props.docData.listID);
     await updateDoc(docupdateRef, { public: !props.docData.public });
}

The problem I am encountering is that when I set the initial value of the toggle component from Firebase during the component’s setup (i.e., before it mounts), the @change event is immediately triggered, causing an unwanted write back to the Firebase database. This creates an infinite loop where setting the toggle value triggers the @change event, which in turn sets the toggle value again.

I have tried various methods to avoid this, including introducing a flag to differentiate between user-triggered and programmatic changes, and different variations of handling updates in Vue’s lifecycle hooks. However, I haven’t been able to find a solution yet.

Is there a recommended way to set the initial value of a toggle component without triggering the @change event? Or is there another event or property I should be using to avoid this issue?

2

Solved with a helper and moved to v-model:checked

let loading = ref(false);

const publicList = computed({
	get: () => props.docData.public,
	set: async (newValue) => {
		if (loading.value) return;
		loading.value = true;
		const docupdateRef = doc(db, "list", props.docData.listID);
		await updateDoc(docupdateRef, { public: newValue });
		loading.value = false;
	},
});