How to make single cells editable

vue-tables is an awesome VueJS component. One of the most commonly asked questions is: How can I make the table editable?

A very simple approach for this is to edit a single row, which normaly corresponds to one entry or 'domain object' in your database. Therefore vue-tables aready offers an option to add a row-click listener.

But for my project I needed something different: I want to make the cells in certain rows editable individually . For the actual in-place editing I found the javascript library x-editable. But how to trigger it?

My UI shows a little edit icon at the right inside a cell, when the user hovers with the mouse over a cell. IMHO this is a very unobstrusive UI.

So lets dive into the code: https://jsfiddle.net/Doogie/nvmt0vd7/

I hope this helps others who also want to make their vue-tables editable