JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="demo">
  <h1>Awesome Items</h1>

  <table>
    <thead>
      <tr>
        <th>Start</th>
        <th>End</th>
        <th>Name</th>
        <th>Description</th>
        <th>tags</th>
        <th>Note</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{ item.start }}</td>
        <td>{{ item.end }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
        <td>
          <div v-for='tag in item.tags'>
            {{ tag }}
          </div>
        </td>
        <td>{{ item.note }}</td>
      </tr>
      <tr>
        <td form="new-item">
          <input type="text" v-model="newItem.start" />
        </td>
        <td form="new-item">
          <input type="text" v-model="newItem.end" />
        </td>
        <td form="new-item">
          <input type="text" v-model="newItem.name" />
        </td>
        <td form="new-item">
          <input type="text" v-model="newItem.description" />
        </td>
        <td form="new-item">
          <input type="text" v-model="newTag" />
          <button @click="addTag">+</button>
          <div v-for='tag in newItem.tags'>
            {{ tag }}
          </div>
        </td>
        <td form="new-item">
          <input type="text" v-model="newItem.note" />
        </td>
      </tr>
    </tbody>
  </table>
  <form id="new-item" v-on:submit="addItem">
    <button type="submit">Create</button>
  </form>

  <pre>{{ $data | json }}</pre>
</div>

CSS

table th,
table td {
  border: solid 1px;
}

table {
  border-collapse: collapse;
}

JavaScript

let blankItem = {
  start: '',
  end: '',
  name: '',
  description: '',
  tags: [],
  note: ''
};

new Vue({
  el: '#demo',

  data: {
    items: [{
        start: '12:15',
        end: '13:15',
        name: 'Whatch Vue.js Laracast',
        description: 'Watched the Laracast series on Vue.js',
        tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
        note: "Vue.js is really awesome. Thanks Evan You!!!"
      },
      {
        start: '13:15',
        end: '13:30',
        name: "Rubik's Cube",
        description: "Play with my Rubik's Cube",
        tags: ['Logic', 'Puzzle', "Rubik's Cube"],
        note: "Learned a new algorithm."
      }
    ],
    newItem: blankItem,
    newTag: ""
  },

  methods: {
    addTag: function(e) {
    	this.newItem.tags.push(this.newTag);
      this.newTag = "";
    },
    addItem: function(e) {
      e.preventDefault();

      this.items.push(JSON.parse(JSON.stringify(this.newItem)));
    }
  }
});