javascript - implementacija v-model putem render funkcije nije reaktivna

Pokušavam stvoriti dinamičku ulaznu komponentu koja će se moći zamijeniti između tagova input i textarea. Pokušavam to implementirati koristeći render funkciju. (https://v2.vuejs.org/v2/guide/render-function.html#v-model).

Problem koji imam je taj što v-model radi samo u jednom smjeru, ako promijenim podatkovnu svojstvo izravno, vrijednost tekstualnog područja se ažurira, ali ako promijenim ili unesem nove podatke u tekstualno područje, podatkovno svojstvo se ne ažurira. Zna li netko kako ga učiniti da radi u oba smjera? Ovdje je moj link koda za CodePen ispod koji ilustrira problem:

const tag = Vue.component('dynamic-tag', {
    name: 'dynamic-tag',
    render(createElement) {
        return createElement(
            this.tag,
            {
                domProps: {
                    value: this.value
                },
                on: {
                    input: event => {
                        this.value = event.target.value
                    }
                }
            },
            this.$slots.default
        )
    },
    props: {
        tag: {
            type: String,
            required: true
        }
    }
})

const app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {tag}
})

http://codepen.io/asolopovas/pen/OpWVxa?editors=1011

Odgovor #1

Trebaš $emit promjene iz svog unosa.

on: {
    input: event => {
        this.value = event.target.value
        this.$emit('input', event.target.value)
    }
}

Odgovor #2

Problem je u tome što koristite v-model s prilagođenom komponentom. Kada se koristi s komponentom v-model="message" je samo sintaktički šećer za

v-bind:value="message"
v-on:input="value => { message = value }"

Dakle, za korištenje v-model s prilagođenom komponentom, vaša komponenta mora imati value prop i emitirati input događaj s promijenjenom vrijednošću.

Daljnja objašnjenja ću prepustiti dokumentaciji