title: Vue.js How to bind an element of the data array to a child components property?
body: <p>I am using vue-tables to show some tabular data. I am trying to extend vue-tables to make cells in certain columns editable. Therefore I created a vuejs child component called "editable-cell" which is able to edit cell content. This child component is inserted as a vue-tables template for the editable column. </p>
  
  <p>These are my vue-tables options:</p>
  
  <pre><code>       headings: {
            title: 'Title',
            description: 'Description',
            createdBy: 'Created By',
            createdAt: 'Created At',
            updatedAt: 'Updated At',
          },
          compileTemplates: true,  // compile vue.js logic on templates.
          templates: {
            title: function(row) {
              return '&lt;editable-cell row-id="'+row._id.$oid+'" key="title" value="'+row.title+'"&gt;&lt;/editable-cell&gt;'
            },
  </code></pre>
  
  <p>Currently I am only passing the plain string value of <code>row.title</code> down to the child component. </p>
  
  <p>My problem: When that is updated, then the data in the parent component is not changed. I know about two-way binding of properties with <code>:value.sync="..."</code>  but how do I do that when I want to bind to the right element in parent data?</p>
  
  <p>vue-tables only passes the <strong>row</strong> to the template function. How do I then bind to the correct element in the parent data <strong>array</strong>?</p>
  
  <p><em>UPDATE</em> I managed to create a JSFiddle that shows my problem:
  <a href="https://jsfiddle.net/Doogie/nvmt0vd7/" rel="nofollow">https://jsfiddle.net/Doogie/nvmt0vd7/</a></p>