(chore) add deep option to watch arrays

Author: antoine92190

src/lib/Room/Room.vue

@@ -509,29 +509,29 @@ export default {
 				if (val) this.message = this.roomMessage
 			}
 		},
-		messages(newVal, oldVal) {
-			newVal.forEach((message, i) => {
-				if (
-					this.showNewMessagesDivider &&
-					!message.seen &&
-					message.senderId !== this.currentUserId
-				) {
-					this.newMessages.push({
-						_id: message._id,
-						index: i
-					})
+		messages: {
+			deep: true,
+			handler(newVal, oldVal) {
+				newVal.forEach((message, i) => {
+					if (
+						this.showNewMessagesDivider &&
+						!message.seen &&
+						message.senderId !== this.currentUserId
+					) {
+						this.newMessages.push({
+							_id: message._id,
+							index: i
+						})
+					}
+				})
+				if (oldVal?.length === newVal?.length - 1) {
+					this.newMessages = []
 				}
-			})
-
-			if (oldVal?.length === newVal?.length - 1) {
-				this.newMessages = []
-			}
-
-			if (this.infiniteState) {
-				this.infiniteState.loaded()
+				if (this.infiniteState) {
+					this.infiniteState.loaded()
+				}
+				setTimeout(() => (this.loadingMoreMessages = false))
 			}
-
-			setTimeout(() => (this.loadingMoreMessages = false))
 		},
 		messagesLoaded(val) {
 			if (val) this.loadingMessages = false

src/lib/RoomsList/RoomsList.vue

@@ -125,15 +125,17 @@ export default {
 	},
 
 	watch: {
-		rooms(newVal, oldVal) {
-			this.filteredRooms = newVal
-
-			if (
-				this.infiniteState &&
-				(newVal.length !== oldVal.length || this.roomsLoaded)
-			) {
-				this.infiniteState.loaded()
-				this.loadingMoreRooms = false
+		rooms: {
+			deep: true,
+			handler(newVal, oldVal) {
+				this.filteredRooms = newVal
+				if (
+					this.infiniteState &&
+					(newVal.length !== oldVal.length || this.roomsLoaded)
+				) {
+					this.infiniteState.loaded()
+					this.loadingMoreRooms = false
+				}
 			}
 		},
 		loadingRooms(val) {