<div v-if="Object.keys(messages).length > 0" class="chat-item" v-for="message of messages">

      <!-- row chat -->
      <div v-if="message.user_rec_id !== user.id" class="mg_bottom_10 message_of_friend">
          <a href="#" class="pull-left w_40 mg_right_5">
              <span class="w_34 r_50 _600 text_lg avatar">
                  <img :src="user.avatar" style="background-color: #f1f1f1;" alt="">
              </span>
          </a>
          <div class="clear">
              <div class="mg_top_30">
                  <div class="text_gray p_right_30 t_content message_content" v-text="message.message">
                  </div>
              </div>
              <div v-text="message.created_at" class="text_xs mg_top_5 time_message">
              </div>
          </div>
      </div>
      <!-- end row chat -->

      <!-- row chat -->
      <div v-if="message.user_rec_id == user.id" class="mg_bottom_10 message_of_me">
          <a href="javascript::void(0)" class="pull-right w_40 mg_left_5">
              <span class="w_34 r_50 avatar">
                  <p style="color: #000;">Me</p>
              </span>
          </a>
          <div class="clear text-right">
              <div class="mg_top_30">
                  <div class="text_gray p_left_30 t_content message_content" v-text="message.message">
                  </div>
              </div>
              <div v-text="message.created_at" class="text_xs mg_top_5 time_message">
              </div>
          </div>
      </div>
      <!-- end row chat -->
   </div>