title: vue: Dynamically inject property data into <component />
body: <p>I'm trying to create a layout component which dynamically creates given components from a parent in either one or the other column. In the layout component I'm using the  directive to create the children components. That works, however I'm having a hard time to get the data into the components themselves (they have different sets of properties).</p>
  
  <p>Therefore:</p>
  
  <h1>How to inject property data into the &lt; component :is="componentFromParent" / > directive?</h1>
  
  <p>I've got something to work, but it's pretty messy. I could do it via a "genericProps" property which contains all the data. Then forcing the children to update and they, via <code>updated()</code>, use <code>Object.assign(this, 'props', this.genericProps)</code> to unpack the <code>genericProps</code> and overwrite it's <code>$props</code>.</p>
  
  <p>It feels pretty much as if I'm working against some princiles of vue.js here. When debugging the <code>this.$options.components</code> of the layout component are filled, however all these components don't have any <code>propsData</code> assigned. But directly using <code>Object.assign()</code> on the <code>this.$options.components</code> doesn't work, as it seems the layout component as the actually instances of these components as it's <code>this.$childrend</code>.</p>
  
  <p>Also I've tried looping through the <code>this.$childrend</code> and assigning the <code>propsData</code> of the <code>this.$options.components</code> but there would have to be a key to match the components with it's correct child and at that point the childrend don't have any properties filled.</p>
  
  <p>Code snippets to illustrate the (ugly) example which kinda works:</p>
  
  <h1>Parent Template</h1>
  
  <pre><code>&lt;template&gt;
    &lt;two-column-layout :firstColumn="$vuetify.breakpoint.mdAndUp ? firstColumn : singleColumn"
                        :secondColumn="$vuetify.breakpoint.mdAndUp ? secondColumn : []"
                        /&gt;
  &lt;/template&gt;
  </code></pre>
  
  <h1>Parent Code</h1>
  
  <p>This code is called via mounted() or via watch when the async call from the API is finished.</p>
  
  <pre><code>  createMetadataContent() {
  
      let currentContent = this.currentMetadataContent;
      const components = this.$options.components;
  
      currentContent = this.mixinMethods_enhanceMetadataEntry(currentContent, this.cardBGImages);
  
      if (currentContent &amp;&amp; currentContent.title !== undefined) {
  
        this.body = metaDataFactory.createBody(currentContent);
        this.$set(components.MetadataBody, 'genericProps', this.body);
  
        this.citation = metaDataFactory.createCitation(currentContent);
        this.$set(components.MetadataCitation, 'genericProps', this.citation);
        // a few more components and data here
  
  
        this.firstColumn = [
          components.MetadataBody,
          // a few more components here
        ];
  
        this.secondColumn = [
          components.MetadataCitation,
          // a few more components here
        ];
  
        this.singleColumn = [
          components.MetadataBody,
          components.MetadataCitation,
          // a few more components here
        ];
  
        this.$forceUpdate();
      }
    }
  </code></pre>
  
  <h1>TwoColumnLayout Template</h1>
  
  <pre><code>&lt;template&gt;          
    &lt;v-layout row wrap&gt;
      &lt;v-flex&gt;
  
        &lt;v-layout column&gt;
          &lt;v-flex mb-2
                  v-for="(entry, index) in firstColumn"
                  :key="`left_${index}`"
                  &gt;
            &lt;component :is="entry"
                        :genericProps="entry.genericProps"
                        /&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-flex&gt;
  
      &lt;v-flex v-if="secondColumn" &gt;
        &lt;v-layout column&gt;
          &lt;v-flex mb-2
                  v-for="(entry, index) in secondColumn"
                  :key="`right_${index}`"
                  &gt;
            &lt;component :is="entry"
                        :genericProps="entry.genericProps"
                        /&gt;
          &lt;/v-flex&gt;
        &lt;/v-layout&gt;
      &lt;/v-flex&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;
  </code></pre>
  
  <h1>TwoColumnLayout Code</h1>
  
  <pre><code>updated() {
    this.$children.forEach((child) =&gt; {
      child.$forceUpdate();
    });
  },
  </code></pre>
  
  <h1>Child Code</h1>
  
  <pre><code>  props: {
      genericProps: Object,
      id: String,
      citationText: String,
      citationXmlLink: String,
      ciationIsoXmlLink: String,
      ciationGCMDXmlLink: String,
      fixedHeight: Boolean,
      showPlaceholder: Boolean,
    },
    updated: function updated() {
      if (this.genericProps) {
        Object.assign(this, 'props', this.genericProps);
      }
    },
  </code></pre>