Vue Tags

HTML

<div id="app">
  <tags v-model="tags"></tags>
</div>

<template id="tags">
  <div>
    <div>
      <input type="text" v-model.trim="tag" @keypress.prevent.stop.enter="addTag">
      <button @click.prevent.stop.enter="addTag">Add</button>
    </div>

    <ul class="tags">
      <li class="tag" v-for="(tag, index) in tags" :key="index">
        <span>{{ tag }}</span>
        <span class="delete" @click="tags.splice(index, 1)">&times;</span>
      </li>
    </ul>
  </div>
</template>

Vue

Vue.component('tags', {
	template: '#tags',
  props: {
    value: {
      type: Array,
      default: () => []
    },
  },

  watch: {
    tags(n, o) {
      this.$emit('input', n);
    }
  },

  data() {
    return {
      tag: '',
      tags: this.value || []
    };
  },

  methods: {
    addTag() {
      if (this.tag && ! this.tags.includes(this.tag)) {
        this.tags.push(this.tag);
        this.tag = '';
      }
    }
  }
});

new Vue({
  el: "#app",
  data() {
  	return {
    	tags: ['foo', 'bar']
    }
  }
})