title: Create dynamic table component Vue JS
body: <p>I'm learning Vue JS. I want to create a component to show data with table that I can reuse in other components. I have 2 props items(data) and columns(column name)</p>
  
  <pre><code>items: [
          {
              'id':'1',
              'title': 'hello',
              'description': 'ok ok',
              'created_date': '2018-09-09'
          },
          {
              'id':'2',
              'title': 'hello 2',
              'description': 'ok ok 2',
              'created_date': '2018-10-09'
          }
      ],
      columns: [ 'id', 'title', 'description', 'created_date']
  </code></pre>
  
  <p>I want to create a table as bellow</p>
  
  <pre><code>&lt;table class="table"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th v-for="(column, index) in columns" :key="index"&gt; {{column}}&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr v-for="(item, index) in items" :key="index"&gt;
          &lt;td v-for="(column, indexColumn) in columns" :key="indexColumn"&gt;{{item.$column}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>
  I don't know how to get value from item by column name. Is it possible to create a table like this? </p>