JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  
  <span :style="{ display : displayTitle }" @dblclick="showInput(node.id)">
  {{ node.title }}
</span>
<input :ref='"input_" + node.id' :style="{display:displayTitleInput}" type="text" :value="node.title">
  
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
        displayTitle: "inline-block",
        displayTitleInput: "none",
        node: {
        	title: "test",
          id: 1
        },
      	showInput(id) {
            this.displayTitle = "none"
            this.displayTitleInput = "inline-block"
						console.log(this)
            this.$nextTick(function () {
            		console.log(this)
                this.$refs["input_" + id].focus()
            })
          }
      };
  }
})