Vue componet using a Feathers backend over websockets

messages.vue

<template>
  <div>
    <input type="text" placeholder="Enter message" v-model="newMessage" @keyup.enter="addMessage">
    <button type="submit" @click="addMessage">Add message</button>
    <ul>
      <li v-for="message in messages">
        <span @dblclick="editMessage(message)" v-if="message != editedMessage">{{ message.text }}</span>
        <input
          type="text"
          v-model="message.text"
          v-if="message == editedMessage"
          @blur="doneEdit(message)"
          @keyup.enter="doneEdit(message)"
          @keyup.esc="cancelEdit(message)">
        <a @click="deleteMessage($index)" v-if="message != editedMessage">[x]</a>
      </li>
    </ul>
  </div>
</template>

<script>
  import feathers from 'feathers/client'
  import socketio from 'feathers-socketio/client'
  import io from 'socket.io-client'
  import _ from 'lodash'

  const socket = io('http://localhost:3030')
  const app = feathers().configure(socketio(socket))
  // Get the message service that uses a websocket connection
  const messageService = app.service('messages')

  export default {
    data () {
      return {
        messages: [],
        newMessage: '',
        editedMessage: null
      }
    },
    ready () {
      // Call the messages service on the server via websocket
      messageService.find({}).then(result => {
        this.messages = result.data
      })

      // When a new message is created, add it to the messages array which is bound to the view.
      messageService.on('created', message => this.messages.push(message))

      // Listen for when a message is deleted from the server and remove it from the view
      messageService.on('removed', message => this.removeMessage(message))

      messageService.on('patched', message => {
        // update the view for all socket clients
        let index = _.findIndex(this.messages, { _id: message._id })
        this.messages[index].text = message.text
      })
    },
    methods: {

      addMessage () {
        if (this.newMessage.trim()) {
          // Persist a new message to the db
          messageService.create({ text: this.newMessage })
          // Clear input field
          this.newMessage = ''
        }
      },

      editMessage (message) {
        this.beforeEditCache = message.text
        this.editedMessage = message
      },

      doneEdit (message) {
        message.text = message.text.trim()
        this.editedMessage = null
        if (!message.text) {
          this.removeMessage(message)
        }
        messageService.patch(message._id, message)
      },

      cancelEdit (message) {
        message.text = this.beforeEditCache
        this.editedMessage = null
      },

      // delete message from the db
      deleteMessage (index) {
        messageService.remove(this.messages[index]._id)
      },

      // remove message from the view
      removeMessage (message) {
        // find the index of the obj to remove from the observable array
        let index = _.findIndex(this.messages, { _id: message._id })
        // remove the obj at position [index] from the observable array
        this.messages.$remove(this.messages[index])
      }

    }
  }
</script>