Vue

HTML

<div id="app">
  <div id="window">
    <div class="typeBarContainer">
      <div class="typeBarInnerContainer">
                
        <div class="typeBar">
          <div class="click" @click="sendResponse">
            Send
          </div>
          <p>
          type in 'hello' to get the right response, any other input will be met with 'this is a response to your input'
          </p>
          <input type="text" placeholder="Type here" v-model="message" name="message">                
        </div>
      
        <div class="messagesC"  v-for="(data, index) in rightOrder" :key='index'>
          <p class="userMessage">
            {{ data.message }}
          </p>
          <p class="botMessage">
             {{ data.response }}
          </p>            
        </div>        
      </div>
    </div>
  </div>
</div>

CSS

#window {
   float: left;
   width: 100%;
 }
.userMessage {
  flex: flex-shrink;
  margin-right: 10px;
}
.botMessage {
   flex: flex-shrink;
}
 .messagesC {
   display: flex;
   flex-wrap: wrap;
 }
 .click {
   float: left;
   background: black;
   color: white;
   padding: 0.5%;
 }

Vue

new Vue({
  el: '#app',
 	data() {
    return {
      message: '',
      output: '',
      messages: [],
      response: '',
      responses: [],      
      input: "",
      text: "",
      foro:[]
      }
  },
  computed: {
    rightOrder() {
      return this.messages.map(message => {
        const response = { ...this.responses.find(response => response.messageId === message.messageId) }
        return {
          message: message.message,
          ...response
        }
      })
    }
  },
  methods: {
    sendResponse() {
    		const messageId = Math.random().toString(16).slice(2); // Generate uuid
        this.messages.push({
          message: this.message,
          messageId,
        })
        this.outputResponse(this.message, messageId);
    },
    outputResponse(input, messageId){
      this.message = '';
      this.timer = setTimeout(() => {
        try {
            var output = input + "=" + eval(input);
        } catch (e) {

            var utterance = [
              ["hello"],
              ],intent = [
                ["hello back!"]
                ],fallback = ["this is a response to your input"];
            var text = (input.toLowerCase()).replace(/[^\w\s\d]/gi, "");
            
            if (this.compare(utterance, intent, text)) {
                output = this.compare(utterance, intent, text);
            } else {
                output = fallback[Math.floor(Math.random() * fallback.length)];
            } 
        }
          this.responses.push({
           response: output,
           messageId
          })
      }, 1000);
      },
      compare(uttArr, intArr, string){
            var match;
            for (var x = 0; x < uttArr.length; x++) {
                for (var y = 0; y < intArr.length; y++) {
                    if (uttArr[x][y] == string) {
                        var matches = intArr[x];
                        match = matches[Math.floor(Math.random() * matches.length)];
                    }
                }
        ...