title: Vue.js tables: vuetables and vue-tables-2 errors
body: <p>I am new to vue.js but I need to render data in a table I have tried both <a href="https://github.com/ratiw/vue-table" rel="nofollow noreferrer">vuetables</a> and <a href="https://github.com/matfish2/vue-tables-2" rel="nofollow noreferrer">vue-tables-2</a> but they both produce error that require me to edit their source file and I do not think it is a good idea. 
  My backend is Laravel 5.3.
  When I used <code>vuetables</code> I got the following error:</p>
  
  <pre><code>ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-369be50a!./~/vue-loader/lib/selector.js?type=template&amp;index=0!./~/vuetable/src/components/VuetablePagination.vue
  template syntax error class="{{wrapperClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of &lt;div class="{{ val }}"&gt;, use &lt;div :class="val"&gt;.
   @ ./~/vuetable/src/components/VuetablePagination.vue 8:23-158
   @ ./resources/assets/js/app.js
  </code></pre>
  
  <p>And with <code>vue-tables-2</code> I got:</p>
  
  <pre><code>    ERROR in ./~/vue-tables-2/lib/template.jsx
  Module parse failed: /home/vagrant/Code/project/node_modules/vue-tables-2/lib/template.jsx Unexpected token (15:7)
  You may need an appropriate loader to handle this file type.
  | var perPage = require('./template/per-page.jsx')(h, this);
  | 
  | return &lt;div class={"VueTables VueTables--" + this.source}&gt;
  |   &lt;div class="row"&gt;
  |     &lt;div class="col-md-6"&gt;
   @ ./~/vue-tables-2/lib/v-client-table.js 1:15-40
   @ ./~/vue-tables-2/index.js
   @ ./resources/assets/js/app.js
  </code></pre>
  
  <p>Is there a way to fix these errors or which other options do I have?</p>