<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I am trying to integrate Vue with Meteor Blaze and am working on rendering of Vue components from Blaze templates. I would like to programmatically create an Vue instance (<code class="notranslate">new Vue(...)</code>) and pass it props and args which would be equivalent to doing <code class="notranslate">&lt;vue-component :prop="propValue" :arg="argValue"&gt;</code>. So an object of key/values which would then be mapped to props, if keys are among props, or be set as element attributes otherwise. But the important part is to also be able to update all of them afterwards. So if any of the props or args change, allowing to call a function to update them would be great.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">I propose that <code class="notranslate">propData</code> could be a function. So that I could provide a reactive function which would be used to populate both props and args (so any keys returned from the function which are not props would become args).</p>
<p dir="auto">Alternatively. we could have <code class="notranslate">vm.$propsUpdate</code> function which I could run to update props and args in a more imperative way.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.14</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codesandbox.io/s/gallant-feather-wxyot?file=/src/my-element.js" rel="nofollow">codesandbox.io</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">View the codesandbox render result</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The custom element render the json content</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The custom element render "[object Object]"</p>
<hr>
<p dir="auto">Accorading to source code:<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/vuejs/vue/blob/0603ff695d2f41286239298210113cbe2b209e28/src/platforms/web/runtime/modules/dom-props.js#L49">vue/src/platforms/web/runtime/modules/dom-props.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 49
      in
      <a data-pjax="true" class="commit-tease-sha" href="/vuejs/vue/commit/0603ff695d2f41286239298210113cbe2b209e28">0603ff6</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L49" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="49"></td>
          <td id="LC49" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">elm</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">strCur</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<br>
, any prop name 'value' on dom element will be stringified, but when using custom elements, the 'value' prop may be an object or number and it should not be stringified.<p></p>