JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <p>
    Letters: {{ letters }}
  </p>
  <child-component v-model:selected="letters"></child-component>
</div>

JavaScript

const ChildComponent = {
  template: `
    <p>
      Selected: {{ selected }}
    </p>
    <input type="checkbox" value="A" v-model="checked">A
    <input type="checkbox" value="B" v-model="checked">B
    <input type="checkbox" value="C" v-model="checked">C
  `,
  props: ['selected'],
  setup (props, { emit }) {
    const checked = Vue.computed({
      get () {
        return props.selected
      },
      set (selected) {
        console.log('set called')
        emit('update:selected', selected)
      }
    })
    
    return {
      checked
    }
  }
}

Vue.createApp({
  components: {
    ChildComponent
  },
  setup () {
    const letters = Vue.ref([])
    
    return {
      letters
    }
  }
}).mount('#app')