JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

  <button @click="rotate">rotate</button>
  <button @click="add">add</button>
  <button @click="del">del</button>

  <my-component v-for="item in items" :key="item.id"></my-component>
  
</div>

CSS

div {
  padding: 5px;
}

Babel + JSX

Vue.component('my-component', {
  template: `<div><input :value="value" /></div>`,
  data() {
    return {
      value: Math.random() * 100 | 0
    }
  }
});

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 },
      { id: 5 }
    ],
  },
  methods: {
    rotate() {
      this.items = this.items.slice(1).concat(this.items[0])
    },
    add() {
      this.items.unshift({ id: Math.max(0, ...this.items.map(n => n.id)) + 1 })
    },
    del() {
      this.items.shift()
    }
  }
});