JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.5/vue.min.js"></script>
<script id="topic-test" type="x-template">
  <div class="topic">
    <div class="topic--inner">
      <div :class="{'is-editable': hasRights}"
            class="topic__text"
            ref="topicText"
           :tabindex="hasRights ? '0' : false"
           :title="elTopicTextAttrTitle"
            v-html="elTopicTextHtmlContent"
            v-show="!showInput || !hasRights"

           @dblclick="handleDblclick"></div>
      <div class="topic__text  is-editable"
           ref="topicText"
           v-show="showInput && hasRights">
        <!-- </textarea> --><!-- '"` -->
        <form  action=""
               class="topic__form"
              @submit.prevent="">
          <textarea  class="topic__editable"
                     ref="topicEditable"
                     type="text"
                     v-model="topic"

                    @blur="handleBlur"></textarea>
        </form>
      </div>

      <!-- ... -->
    </div>
  </div>
</script>

<div id="app"></div>

JavaScript

new Vue({
  el: '#app',
  template: '#topic-test',
  
  data () {
    return {
      room: { topic: 'Je fais un test' },
      send: true,
      showInput: false,
      topic: ''
    }
  },

  computed: {
    elTopicTextAttrTitle: function () {
      return 'Double cliquer pour changer le topic.'
    },

    elTopicTextHtmlContent: function () {
      return 'Un topic' // htmlspecialchars ;-)
    },

    hasRights: function () {
      return true
    }
  },

  methods: {
    handleDblclick: function (e) {
      if (!this.hasRights) return

      this.showInput = true

      var _this = this
      this.$nextTick(function () {
        _this.$refs.topicEditable.focus()
      })
    },

    handleBlur: function (e) {
      if (!this.hasRights) return

      console.log('blur')
      this.showInput = false

      var _this = this
      this.$nextTick(function () {
        if (_this.send === true) {
          if (_this.room.topic !== _this.topic) {
            if (_this.topic.length === 0) {
              _this.topic = ' '
            }

            console.log(_this.topic)
          }
        }
      })
    }
  }
})