JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table" id="tasks">
		<thead>
		    <tr>
		        <th>Task</th>
		        <th>Edit</th>
		        <th>Options</th>
		    </tr>
		</thead>
		<tbody>
		    <tr v-repeat="task: tasks">
		        <td class="todo">	
		        	<span class="task" v-el="label" v-on="dblclick: editTask(this)">
						{{ task.body }}
					</span>
				</td>
				<td>
		            <input type="text" v-el="inputField" class="editInputField" value="{{ task.body }}">
		        </td>
		        <td>
		            <button class="btn btn-xs btn-primary" v-on="click: editTask(this)">Edit</button>
		        </td>
		    </tr>
		</tbody>
	</table>

CSS

.edit {
    color: green;
    font-size: 20px;
    background-color: red;
}

JavaScript

new Vue({
		    el: '#tasks',

		    data: {
		        "tasks": [
				    {
				      "id": 25,
				      "body": "Slack Noooo Yes",
				      "completed": true,
				      "created_at": "2015-08-05 17:00:26",
				      "updated_at": "2015-08-05 17:00:26"
				    },
				    {
				      "id": 27,
				      "body": "And",
				      "completed": false,
				      "created_at": "2015-08-05 17:22:14",
				      "updated_at": "2015-08-05 17:22:14"
				    },
				    {
				      "id": 28,
				      "body": "Happiness",
				      "completed": false,
				      "created_at": "2015-08-05 17:22:16",
				      "updated_at": "2015-08-05 17:22:16"
				    },
				    {
				      "id": 29,
				      "body": "Love",
				      "completed": true,
				      "created_at": "2015-08-06 07:45:02",
				      "updated_at": "2015-08-06 07:45:02"
				    }
				],

		        newTask: ''
		    },

		    methods: {
		        editTask: function (task) {
		            task.$$.inputField.focus();
		            task.$$.label.className += " edit";
		        }
		    }
		});