title: Vue.js component with dynamic template (e.g. eventhandler)
body: <p>lets say I made a compontent called test and inserted this into my html like so:</p>
  
  <pre><code>&lt;test :data="foo"&gt;&lt;/test&gt;
  </code></pre>
  
  <p>How can I achieve that the on-click attribute value changes into the property value 'data'?</p>
  
  <pre><code>Vue.component('test', {
  props: ['data'],
  template: '&lt;div v-for="element in {{foo}}" &gt;&gt;&lt;/div&gt;'
  });
  </code></pre>
  
  <hr>
  
  <p>Just to outline my expectations - this is what I am looking for:</p>
  
  <pre><code>&lt;test :data="bar"&gt;&lt;/test&gt;
  &lt;test :data="hello"&gt;&lt;/test&gt;
  </code></pre>
  
  <p>renders to</p>
  
  <pre><code>&lt;div v-for="element in bar" &gt;&lt;/div&gt;
  &lt;div v-for="element in hello" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>BTW: Thanks to everyone participates here in SO :)</p>