Vue3 - aplikacja do czatu, łapka w górę + firebase i on value bierze wszystko pod uwagę

witam!
W czasie nauki Vue poznałem firebase. Postanowiłem napisać prosty czat i wszystko działa fajnie. Zrobiłem nawet, że okienko wiadomości scrolluje się do samego dołu kiedy użytkownik otrzyma nową wiadomość. Działa to na zasadzie, kiedy jakaś wartość ulegnie zmianie to scrolluj na dół. Wdrożyłem prosty mechanizm w którym można dać łapkę w górę kiedy lubimy jakąś wiadomość ale kiedy ją polubimy to czat automatyczniy scrolluje się na sam dół bo myśli, że otrzymał nową wiadomość.

   function thumbUpMessage(id) {
      const msg = firebase.database().ref("chats").child(id).child("thumbUp");
      msg.transaction((thumbUp) => !thumbUp);
    }

Link do kodu źródłowego czatu: https://github.com/KrwawyOrk/My-Vue-3-apps/blob/main/Chat.vue

Działa to na zasadzie, kiedy jakaś wartość ulegnie zmianie to scrolluj na dół.

Ale gdzie to masz w kodzie? Ja widzę tylko @click="scrollDownAfterAppendMessage", czyli jak użytkownik kliknie przycisk, a nie jak "jakaś wartość ulegnie zmianie".

chatsRef.on("value", (snapshot) => {

w OnMounted... chciałbym zrobić wyjątek dla łapek w górę/dół
Chyba, że będę gdzieś przechowywał ostatnią wiadomość i porównywał ją z tą z firebase, jeżeli będzie inna to wtedy scroll w dół.

Dobra już wiem o co chodzi. Czat automatycznie przewijał się w dół kiedy jakakolwiek wartość w bazie danych tego czatu została zmieniona. Winowajcą jest chatsRef.on("value", (snapshot). Muszę zmienić typ eventu.

value
The first event type is value. We showed you how to use value in our last chapter. This event type will be triggered every time the data changes and it will retrieve all the data including children.

Zmienię na child_added:

child_added
This event type will be triggered once for every player and every time a new player is added to our data. It is useful for reading list data because we get access of the added player and previous player from the list.

EDIT:
Ok. Zrobiłem to. Az samemu sobie dam reputa

onMounted(() => {
      const chatsRef = firebase.database().ref("chats/global");

      chatsRef.on("child_changed", snapshot => {   
        const msgRef = state.chats.find(element => element.key === snapshot.key);
        msgRef.thumbUp = snapshot.val().thumbUp;
      });

      chatsRef.on("child_added", (snapshot) => {
        state.chats.push({ key: snapshot.key, ...snapshot.val() });

        nextTick(() => {
          scrollDownAfterAppendMessage();
        });
      });
    });