title: Returning a Column in Vue Data grid a a clickable button
body: <p>I am trying to use vue.js grid to show a bunch of columns with calculated texts and one clickable column in the end which does some action dynamically based on the parameter.(calling an api in laravel for example)</p>
  
  <p>When I return the last column as a clickable link, the vue.js prints me the  tag instead of showing it in the grid. What Am I doing wrong?
  VueCode:</p>
  
  <pre><code>  // register the grid component
      Vue.component('demo-grid', {
        template: '#grid-template',
        props: {
          data: Array,
          columns: Array,
          filterKey: String
        },
        data: function () {
          var sortOrders = {}
          this.columns.forEach(function (key) {
            sortOrders[key] = 1
          })
          return {
            sortKey: '',
            sortOrders: sortOrders
          }
        },
        computed: {
          filteredData: function () {
            var sortKey = this.sortKey
            var filterKey = this.filterKey &amp;&amp; this.filterKey.toLowerCase()
            var order = this.sortOrders[sortKey] || 1
            var data = this.data
            if (filterKey) {
              data = data.filter(function (row) {
                return Object.keys(row).some(function (key) {
                  return String(row[key]).toLowerCase().indexOf(filterKey) &gt; -1
                })
              })
            }
            if (sortKey) {
              data = data.slice().sort(function (a, b) {
                a = a[sortKey]
                b = b[sortKey]
                return (a === b ? 0 : a &gt; b ? 1 : -1) * order
              })
            }
            return data
          }
        },
        filters: {
          capitalize: function (str) {
            return str.charAt(0).toUpperCase() + str.slice(1)
          }
        },
        methods: {
          sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
          }
        }
      })
  
      // bootstrap the demo
      var demo = new Vue({
        el: '#demo',
        data: {
          searchQuery: '',
          gridColumns: ['name', 'power','report'],
          gridData: [
            { name: 'Chuck s', power: Infinity },
            { name: 'Bruce Lee', power: 9000 },
            { name: 'Jackie Chan', power: 7000 },
            { name: 'Jet Li', power: 8000 ,report: '&lt;a href="http://www.google.com&gt;Google&lt;/a&gt;"'}
          ]
        }
      })
  </code></pre>
  
  <p>HTML file:
  </p>
  
  <pre><code>&lt;script type="text/x-template" id="grid-template"&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th v-for="key in columns"
            @click="sortBy(key)"
            :class="{ active: sortKey == key }"&gt;
            {{ key | capitalize }}
            &lt;span class="arrow" :class="sortOrders[key] &gt; 0 ? 'asc' : 'dsc'"&gt;
            &lt;/span&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for="entry in filteredData"&gt;
          &lt;td v-for="key in columns"&gt;
            {{entry[key]}}
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/script&gt;
  
  &lt;!-- demo root element --&gt;
  &lt;div id="demo"&gt;
    &lt;form id="search"&gt;
      Search &lt;input name="query" v-model="searchQuery"&gt;
    &lt;/form&gt;
    &lt;demo-grid
      :data="gridData"
      :columns="gridColumns"
      :filter-key="searchQuery"&gt;
    &lt;/demo-grid&gt;
  &lt;/div&gt;
  </code></pre>