title: Props passed by propsData are undefined when creating a Vue component at runtime
body: <p><strong>What I'm trying to do:</strong></p>
  <p>To simplify the problem: Let's say that I have a single page Vue component called <code>A</code>, that that component has a prop called <code>x</code>. I have a view called <code>B</code> where I have a button that creates and adds a new <code>A</code> component when clicked.</p>
  <p><strong>The way I tried to do it:</strong></p>
  <p>First of all, I'm aware of the possibility of storing the component's code in a constant and reusing that again and again. But that's not what I want, I have my component in a separate file, I want to use that.</p>
  <p>This is how I do it:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div id=&quot;editor&quot; class=&quot;editor&quot; ref=&quot;editor&quot;&gt;
          
      &lt;/div&gt;
      &lt;button @click=&quot;addBlock('heading')&quot;&gt;Add a block&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from &quot;vue&quot;;
  import A from &quot;...&quot;;
  export default {
    name: &quot;B&quot;,
    components: {
      A
    },
    methods: {
      addBlock(val) {
        console.log(&quot;Adding a block: &quot;, val);
        var ComponentClass = Vue.extend(A, {
          propsData: {
            x: val
          },
        });
        var instance = new ComponentClass();
        instance.$mount();
        this.$refs.editor.insertBefore(
          instance.$el,
          this.$refs.editor.children[this.$refs.editor.children.length - 3] // I have some othe elements there that I want to keep at the end
        );
      },
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>The problem:</strong></p>
  <ul>
  <li>The new component is created and added to the page, but, the <code>x</code> property of that component is <code>undefined</code>.</li>
  <li>Although the new component is added to the page, its is not showing in the components tree in the vue devtools.</li>
  <li>Finally, the <code>A</code> component has an event called <code>save</code>, in the <code>B</code> view, I have a method called save too (it's under <code>methods</code>), I want to bind that event to my method, I can't just add <code>@save: &quot;this.save&quot;</code> to the <code>propsData</code>. What's the correct way of doing that?</li>
  </ul>