JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  {{ obj }}
  <my-child v-model="obj"></my-child>
</div>

JavaScript

const MyMixin = {
  model: {
    property: 'value',
    event: 'changed'
  },
  props: {
    value: {type: Object}
  },
  computed: {
    selectValue: {
      get() {
        return this.value.product
      },
      set(value) {
        this.$emit('changed', {...this.value, product: value})
      }
    }
  }
}

const MyChild = {
  extends: MyMixin,
  template: `<input v-model="selectValue">`
}

new Vue({
  components: {
    MyChild
  },
  data() {
    return {
      obj: { product: 'Car' }
    }
  }
}).$mount('#app')