JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <stateless-child v-for="item in items" :item="item"></stateless-child>
  <hr>
  <stateful-child v-for="item in items" :item="item"></stateful-child>
  <hr>
  <stateful-child v-for="item in items" :item="item" :key="item"></stateful-child>
  <button @click="items.reverse()">
    Reverse
  </button>
</div>

JavaScript

const StatelessChild = {
  props: ['item'],
  template: `<div>{{ item }}</div>`
}

const StatefulChild = {
  props: ['item'],
  template: `<div>{{ item }} - {{ num }}</div>`,
  data () {
    return {
      num: String(Math.random()).slice(2, 5)
    }
  }
}

Vue.createApp({
  components: { StatelessChild, StatefulChild },
  data () {
    return {
      items: ['Red', 'Green', 'Blue']
    }
  }
}).mount('#app')