использование методов в цикле v-for

При использовании методов в цикле v-for метод isFirstMessageToMaster выполняется дважды, хотя в messages всего один элемент:

<ul class="ks-items" v-for="message in messages"
                        v-bind:key="message.message_id">
    <div v-if="isFirstMessageToMaster(message)">
            {{ message }}
    </div>
</ul>

Код метода isFirstMessageToMaster:

isFirstMessageToMaster(message){
    let isFirst = false
      axios
       .get(config['host_addres'] + "/api/firstmessagetoMaster/" + message.message_id)
         .then(response => {
               if (response.data) {
                    this.getMaster(message.master_id)
                    isFirst = true
                    }
                }
            )
     return isFirst

Не знаю, как решить проблему. Надо проверять запросом к бд условие и у первого сообщения выводить дополнительную информацию. Использую vuex для хранения данных. Как я понимаю vue не успевает заменить новый список для v-for и метод isFirstMessageToMaster и метод используется сначала для старого списка, затем для нового

вот весь код компонента

export default {
    name: 'MessengerComponent',
    data() {
        return {
            user: this.$store.getters.CURENT_USER,
            masters_list: []
        }
    },
    methods: {
        dd: ()=>{
            console.log('debug')
            return 1
        },
        getFormatDate: function (date) {
            date = new Date(date)

            return date.getDate() + "." + date.getMonth() + 1 + "."
                + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes()
        },
        getMaster: function (master_id) {
            
            axios
                .get(config['host_addres'] + "/api/master/" + master_id)
                .then(response => {
                    this.$data.masters_list.push( response.data)
                }
                    )

        },
        isFirstMessageToMaster(message){
            console.log('dddd')
            let isFirst = false
            axios
                .get(config['host_addres'] + "/api/firstmessagetoMaster/" + message.message_id)
                .then(response => {
                    if (response.data) {
                        this.getMaster(message.master_id)
                        isFirst = true
                    }
                }

                    )
            return isFirst
        }

    },
    computed: mapState({
        curent_user: state => state.curent_user,
        curent_userAlias: 'user',
        messages: state => state.messages
    }),
    watch: {
        curent_user(newValue) {
            // Вы можете выполнить обработку изменения здесь
            this.$data.user = newValue
            this.masters_list = []
            this.$store.dispatch('UNSUBSCRIBE_MESSAGES');
            this.$store.dispatch('GET_MESSAGES_STREAM', newValue.client_id);
        }
    },
    mounted() {

        // axios
        //     .get(config['host_addres'] + '/api/getfirstmessage/'+ this.user.client_id +'/'+this.user.last_message.master+'')
        //     .then(response => (console.log(response.data)));
        this.$store.dispatch('GET_MESSAGES_STREAM', this.user.client_id);
    },
    onUnmounted() {
        
        this.$store.dispatch('UNSUBSCRIBE_MESSAGES');
    }

}

Код vuex хранилища

import Vuex from 'vuex';
import axios from 'axios';
import config from '@/config';

export const store = new Vuex.Store({
  state: {
    users: null,
    curent_user: null,
    messages: null,
    messages_listener: (event, context)=>{  let data = JSON.parse(event.data);
      context.commit('SET_MESSAGES', data);},
    event_sourse: null
  },
  getters: {
    USERS: state => {
        return state.users;
      },
    CURENT_USER: state => {
        return state.curent_user;
      },
    MESSAGES: state => {
      return state.messages;
    },
  },
  mutations: {
    SET_USERS: (state, payload) => {
        state.users = payload;
      },
    SET_CURENT_USER: (state, payload) => {
        state.curent_user = payload;
      },
    SET_MESSAGES: (state, payload) => {
      state.messages = payload;
    },
  },
  actions: {
    GET_USERS: async (context) => {
        axios
      .get(config['host_addres'] + '/api/users/')
      .then(response => (context.commit('SET_USERS', response.data)));
      },
    GET_USERS_STREAM: async (context) => {
            let es = new EventSource(config['host_addres'] + '/api/stream/users/');
            es.onopen = function (event) {
              console.log("conneted", event)
            }
        
            es.addEventListener('message', event => {
                let data = JSON.parse(event.data);
                context.commit('SET_USERS', data);
            }, false);       
    },
    GET_MESSAGES_STREAM: async (context, id) => {
      context.state.event_sourse = new EventSource(config['host_addres'] + '/api/stream/user/' + id + '/messages/');
      context.state.event_sourse.onopen = function (event) {
        console.log("conneted to messages", event)
      }
      
       context.state.event_sourse.addEventListener('message', event => {
        context.state.messages_listener( event, context)
        
      }, false);      
    }, 
    UNSUBSCRIBE_MESSAGES: async (context) =>{
      if (context.state.event_sourse) {
        context.state.event_sourse.close(); // закрываем соединение с сервером
        context.state.event_sourse = null; // сбрасываем переменную объекта
      }
    }
  },
});

Ответы (1 шт):

Автор решения: Nebob

В общем я понял, что сильно намудрил на фронтенде и сам запутался. Пошел длинным путем и вынес всю логику в бэк. Теперь в message у меня есть поле для проверки на первое сообщение и поле с мастером.

→ Ссылка