vue js ajax inside another ajax is getting data but not rendering view

the DOM is updated with messages with when you do the ajax request with only getConversationMessages and not placing getConversationMessages in the success callback of the ajax request of getParticipants is the fact that an error is encountered at this line

this.participants = response.data.participants;

you are using a normal function in the success callback of the ajax request that's the reason this does not point to the vue instance adnd this.participants gives you an undefined error. So use vm insteaad to point to the vue instance as you did in the rest of the program

vm.participants = response.data.participants;

Edit

var vm = new Vue({
         el: '#messages',
        data: {
            participants: [],
            active_conversation: '',
            messages: []
        },

        methods: {

            getParticipants: function () {
                 return this.$http.post('message/get-participants');
            },

           getConversationMessages : function(conv_id){
               return this.$http.post('message/get-messages/' + conv_id);
           }
        },


      mounted: function () {
            this.getParticipants().then(function (response){

                vm.participants = response.data.participants;

                if (getUrlParameterByName('conversation_id')) {
                    return vm.getConversationMessages (getUrlParameterByName('conversation_id')); // this ajax call is getting data but not showing in view  
                }
            }).then(function(response){
                if (response.data.status == 'success') {
                console.log(response.data.messages)
                   vm.messages = response.data.messages;
            });

        }

})

Call second http request after first is completed using http callback or you can use Promise too.

return this.$http.post(function(response){

   // first call
}).then(function(response){

// Second call
})

new Vue({
  el: '#messages',
  data: {
    participants: [],
    active_conversation: '',
    messages: []
  },
  methods: {
    async getParticipants (id) {
      var response = await this.$http.post('message/get-participants')
      this.participants = response.data.participants
      if (id) this.getConversationMessages(id)
    },
    async getConversationMessages (id) {
      var response = this.$http.post('message/get-messages/' + id)
      if (response.data.status === 'success') {
        console.log(response.data.messages)
        this.messages = response.data.messages;
      }
    }
  },
  created () {
    this.getParticipants(getUrlParameterByName('conversation_id'))
  }
})