From f9d74436b82265360fc22bb30e8ca36fcef6bc53 Mon Sep 17 00:00:00 2001
From: Naomi Calabretta <nyaomicalabretta@gmail.com>
Date: Mon, 3 Feb 2025 16:59:32 +0100
Subject: [PATCH] fix this logic even more

---
 src/components/member/MemberAvatar.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/member/MemberAvatar.vue b/src/components/member/MemberAvatar.vue
index ceef0c0..3633d1d 100644
--- a/src/components/member/MemberAvatar.vue
+++ b/src/components/member/MemberAvatar.vue
@@ -9,7 +9,7 @@
 	import { PartialBy } from "../../lib/types";
 
 	import accountCircle from "@material-symbols/svg-600/outlined/account_circle.svg";
-	import { isReactive, ref, watch } from "vue";
+	import { isReactive, ref, watch, WatchStopHandle } from "vue";
 
 	const props = defineProps<{
 		member: PartialBy<Member, "uuid" | "dateCreated">,
@@ -23,10 +23,17 @@
 			: "var(--ion-color-primary)";
 	}
 
-	updateColor();
-	watch(props, updateColor);
-	if(isReactive(props.member))
-		watch(props.member, updateColor);
+	let watchHandle: WatchStopHandle | undefined;
+	watch(props, () => {
+		updateColor();
+		if(isReactive(props.member))
+			watchHandle = watch(props.member, updateColor);
+		else
+			if(watchHandle){
+				watchHandle();
+				watchHandle = undefined;
+			}
+	}, { immediate: true });
 </script>
 
 <template>