title: How to bind dynamic props to dynamic components in VueJS 2
body: <p>I'd like to know how I can iterate a list of component names (which come from an AJAX call to an API server) and render them as components, and pass relevant properties to each component (i.e. bind their properties dynamically).</p>
  
  <p>So far I have managed to iterate a JSON list of items that represent components, and successfully render these components. What I'd like to do now is bind the properties for each component using <code>v-bind</code>.</p>
  
  <p>In the example below, the <code>item-one</code> component would receive the <code>image</code> property with the <code>item1.jpg</code> value; and the <code>item-two</code> component wouldn't receive any properties.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-for="item in items"&gt;
      &lt;component :is="Object.keys(item)[0]" :v-bind="???"&gt;&lt;/component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import ItemOne from '../components/item-one'
    import ItemTwo from '../components/item-two'
  
    export default {
      components: {
        ItemOne,
        ItemTwo
      },
      asyncData () {
        return {
          items: [
            { 'item-one': { 'image': 'item1.jpg' } },
            { 'item-two': { } }
          ]
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried using <code>:v-bind="Object.values(Object.keys(item)[0])"</code> but I get the attribute <code>v-bind="[object Object]"</code> in the rendered element.</p>