title: Vuejs passing props from object into dynamic components
body: <p>I am making a dashboard app where someone can add any widget in any order to their dashboard. It's all working but Im trying to kill some technical debt and clean up. </p>
  
  <p>For simplicity, lets say a dashboard can have 2 widgets (Clock and Weather). These widgets need some data from the dashboard record. The widgets can be in any order on the page.</p>
  
  <p>Im including them like so.</p>
  
  <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>data () {
      return {
        widget1: 'Clock',
        widget2: 'Weather',
        widgetData: {
          weather: {
            long: '12.23.34',
            lat: '23.34.45'
          },
          Clock: {
            timeFormat: '24Hour',
            dateFormat: 'US'
           }
        }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Then in the HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;component v-bind:is="this.widget1" :widgetData="widgetData"&gt;&lt;/component&gt;
  
  &lt;component v-bind:is="this.widget2" :widgetData="widgetData"&gt;&lt;/component&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now what I want to do is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- if this.widget1 is Clock then :widgetData should equals widgetData.Clock --&gt;
  
  &lt;component v-bind:is="this.widget1" :widgetData="widgetData.this.widget1"&gt;&lt;/component&gt;
  
  &lt;!-- if this.widget2 is Weather then :widgetData should equals widgetData.Weather --&gt;
  
  &lt;component v-bind:is="this.widget2" :widgetData="widgetData.this.widget2"&gt;&lt;/component&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>so that the this.widget1 will populate both the :is and drill down into the :widgetData object so Im not passing the whole object to each component</p>
  
  <p>My example take into consideration only 2 widgets but in reality a simple dashboard can have up to 9. </p>
  
  <p>I've tried pretty much every thing such as </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>:widgetData="widgetData.{{this.widget1}}"
  :widgetData="widgetData.${this.widget1}"</code></pre>
  </div>
  </div>
  </p>
  
  <p>etc. </p>
  
  <p>Any ideas?</p>