JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.min.js"></script>
 <div id="app">        
        <table>
            <thead>
                <tr>
                    <th v-for="item in headers" :key="item.id">{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row,rowInd) in colData"  :key="row.id">
                	<template v-for="(item,colInd) in row"  >
                		<template v-if="rowInd == rowSel && colInd == colSel">
                    		<td contenteditable="true" v-on:focusout="lostFocus" :key="item.id">{{item}}</td>
                    	</template>
                    	<template v-else>
                    		<td v-on:dblclick="dataClick">{{item}}</td>
                    	</template>
                    </template>
                </tr>
            </tbody>
        </table>
    </div>

JavaScript

"use strict";

var headers = [
    "Book", "Author", "Language", "Published", "Sales"
];

var data = [
    ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"],
    ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
    ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
    ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
    ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754-1791", "100 million"],
    ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
    ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"],
];

var Excel = new Vue({
	el: '#app',

	data: {
		colData: data,
		headers: headers,		
		colSel: -1,
		rowSel: -1
	},
	methods: {
		dataClick: function(ev){	
			this.colSel = ev.target.cellIndex;
			this.rowSel = ev.target.parentElement.rowIndex - 1;
			Vue.nextTick( function(){
				ev.target.focus();
			});
		},

		lostFocus: function(ev){						
			console.log(ev.target.textContent);
			//var changedRow = this.colData.slice(this.rowSel,this.rowSel+1);
			this.colSel = -1;
			this.rowSel = -1;
			console.log(this.colSel + " " + this.rowSel);
			
		}
	}
});