title: How to make the props binding reactive when using 'createElement' function
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.config.devtools = false
  Vue.config.productionTip = false
  let modal = Vue.extend({
    template: `
  &lt;div class="modal"&gt;
    &lt;p&gt;Balance: {{ balance }}&lt;/p&gt;
    &lt;input @input="$emit('input', $event.target.value)" :value="value"&gt;
    &lt;button @click="$emit('input', balance)"&gt;ALL&lt;/button&gt;
  &lt;/div&gt;
  `,
    props: ['balance', 'value']
  })
  
  function makeComponent(data) {
    return { render(h) { return h(modal, data) } }
  }
  
  Vue.component('app', {
    template: `
  &lt;div&gt;
    &lt;p&gt;Balance: {{ balance }}&lt;/p&gt;
    &lt;p&gt;To withdraw:  {{ withdrawAmount }}&lt;/p&gt;
    &lt;p&gt;Will remain: {{ balance - withdrawAmount }}&lt;/p&gt;
    &lt;button @click="onClick"&gt;Withdraw&lt;/button&gt;
    &lt;modal-container ref="container"/&gt;
  &lt;/div&gt;`,
    data () {
      return {
        withdrawAmount: 0,
        balance: 123
      }
    },
    methods: {
      onClick () {
        this.$refs.container.show(makeComponent({
          props: {
            balance: String(this.balance),
            value: String(this.withdrawAmount)
          },
          on: {
            input: (value) =&gt; {
              this.withdrawAmount = Number(value)
            }
          }
        }))
      }
    }
  })
  
  Vue.component('modal-container', {
    template: `
  &lt;div&gt;
     &lt;component v-if="canShow" :is="modal"/&gt;
  &lt;/div&gt;
  `,
    data () {
      return { modal: undefined, canShow: false }
    },
    methods: {
      show (modal) {
        this.modal = modal
        this.canShow = true
      },
      hide () {
        this.canShow = false
        this.modal = undefined
      }
    }
  })
  
  
  new Vue({
    el: '#app'
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    background-color: gray; 
    width: 300px; 
    height: 100px; 
    margin: 10px;
    padding: 10px;
  }
  
  * {
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    color: #2c3e50;
    line-height: 25px;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;app&gt;&lt;/app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  This is a simplified version of our application using <a href="https://github.com/euvl/vue-js-modal" rel="nofollow noreferrer">vue-js-modal</a>. The basic Idea is that we pass a component declaration along with required <a href="https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth" rel="nofollow noreferrer">VNodeData</a> to the plugin function and it would append that component to a pre-defined DOM point with proper data bindings.</p>
  <p>And our usecase is that:</p>
  <ol>
  <li>User clicks 'Withdraw'</li>
  <li>Modal pops up with an input field and static field displaying user's balance</li>
  <li>User enters the amount he/she wants to withdraw and that amount and resulting balance are displayed in the callee component.</li>
  </ol>
  <p><em>There is a 'ALL' button besides the input field for user to easily enter a number equal to his/her balance</em></p>
  <p><strong>Problem</strong>: When user clicks 'ALL', the 'modal' component fires an 'input' event with value of the balance and the callee component receives that event and updates its 'withdrawAmount'. But the 'withdrawAmount' is supposed to be passed back to the 'modal' as 'value' prop and further updates the input field, which doesn't happen.</p>