JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://use.fontawesome.com/d7d756a782.js"></script>
<div id="app">
<table>
<tr v-for="task in tasks"><td class="views-field views-field-task-type hosting-status">
  <i class="fa fa-{{ task.icon }}"></i> {{ task.type }}: <a href="{{ ref.url }}">{{ task.ref.title }}</a> 
  <select v-model="task.icon">
    <option value="clock-o">Queued</option>
    <option value="gear fa-spin">Running</option>
    <option value="check">Success</option>
    <option value="warning">Warning</option>
    <option value="error">Error</option>
  </select>
  </td></tr>
<tr><td>
  
</td></tr>    
</table>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    tasks: [
      { 
        type: 'verify',
        status: 'queued',
        icon: 'clock-o',
        created: 123456789,
        ref: {
          type: 'site',
          title: 'aegir.local.site',
          url: '/hosting/c/aegir.local.site'
        }
      }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})