17.js

// ./src/App.vue

// [...]
    setActiveChannel (channel) {
      // Before changing the active channel,
      // Stop listening to event from the previous one
      if (this.activeChannel) {
        this.activeChannel['listeners']['message.new'] = []
      }
      
      // Reset the messsages array
      this.messages = []
      
      // loop through messages in this channel and translate them
      channel.state.messages.forEach( async message => {
        try {
          const { data, status} = 
               await axios.post(`${process.env.VUE_APP_SERVER}/translate`, {
                  targetLanguage: this.language,
                  text: message.text
               })

          this.messages.push({...message, text: data.TranslatedText})
        } catch (e) {
          this.messages.push(message)
        }
      })
      
      // Set the active channel
      this.activeChannel = channel
      
      //  Listen for new messages
      channel.on('message.new', async event => {
        try {
          const { data, status } = 
               await axios.post(`${process.env.VUE_APP_SERVER}/translate`, {
                  targetLanguage: this.language,
                  text: event.message.text
               })

          this.messages.push({...event.message, text: data.TranslatedText})
        } catch (e) {
          this.messages.push(event.message)
        }
      });
    },
// [...]