title: Vue reactive props on programmatic component
body: <p>Given a component:</p>
  
  <pre><code>Vue.component('my-comp', {
    props: ['input'],
    watch: { input: function(){...} },
  });
  </code></pre>
  
  <p>What is the programmatic method for the following?</p>
  
  <pre><code>&lt;my-comp :input="map[key]"&gt;&lt;/my-comp&gt; map[key] change triggers watch
  </code></pre>
  
  <p>I have tried:</p>
  
  <pre><code>new (Vue.component('my-comp'))({
    propsData: { input:map[key] }, // map[key] change doesn't trigger watch
  });
  </code></pre>
  
  <p>The context for this is inserting zero-to-many components into markdown-generated HTML. I call <code>.$mount()</code> for each component, and move its node with a native DOM <code>replaceChild()</code> call when markdown is re-rendered. See also <a href="https://stackoverflow.com/questions/49139819/vue-components-in-user-defined-markdown">Vue components in user-defined markdown</a></p>