JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="p in persons">{{ p.name }} (ID: {{ p.id }})</li>
  </ul>
  
  <button v-on:click="addNewPerson()">Add Person</button>
  <button v-on:click="shuffle()">Shuffle</button>
  <p>test plus<button @click="addStock()">+</button>{{stock}}</p>
  <ul>
    <li v-for="(person, index) in persons">{{person.name}} 
      <button class="btn btn-success" @click="removePerson(index)">remove</button>
    </li>
    <br>
  <!--    <div class="number-in-stock" :class="{few:product.inStock < 10, none: product.inStock < 1}">
                {{product.inStock}} in stock
     </div> -->
    <p>
      <input v-model="text" @keyup.enter="addPerson"> ADD person 
      <strong :class="{up: persons.length > 4, end: persons.length == 0}">len {{  persons.length}}</strong>
    </p>
  </ul>
  <h2 v-show="task">Show me<h2>
  </h2>
  
  </h2>
  <h1 v-if="stock > 129">Hello</h1>
</div>

CSS

.low {
  color: red ;
}
.end {
  color: blue;
}
.up {
   color: yellow;
}
body {
  background: green ;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  stock: 122,
  task: false,
  text: "",

  	persons: [
	    { id: 1, name: 'Andy' },
      { id: 2, name: 'Abby' },
      { id: 3, name: 'Teresa' }
    ]
  },
  methods: {
  	addNewPerson: function() {
    	var highestId = Math.max.apply(Math, this.persons.map(function(p) { 
      	return p.id;
      }));
      var names = ['Billy', 'Michael', 'Steve', 'Diane', 'Peter'];
      
      this.persons.push({
      	id: highestId + 1,
        name: names[Math.floor(Math.random() * names.length)]
      });
    },
    shuffle: function() {
    	this.persons = this.shuffleArray(this.persons);
    },
    shuffleArray: function (arr) {
    	var newArr = arr.slice();
    
      for (var i = newArr.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = newArr[i];
          newArr[i] = newArr[j];
          newArr[j] = temp;
      }
      
      return newArr;
		},
    	addStock() {
  	this.stock++;
    if(this.stock == 125) { this.task = true;}
  	},
    	removePerson(index) {
    		this.persons.splice(index,1);
        console.log(this.persons.length);
    },
    addPerson() {
    	this.persons.push({name: this.text });
      this.text = "";
    }
  },
 
});