html - Vue.js component with dynamic template (e.g. eventhandler) -

lets made compontent called test , inserted html so:

<test :data="foo"></test> 

how can achieve on-click attribute value changes property value 'data'?

vue.component('test', { props: ['data'], template: '<div v-for="element in {{foo}}" >></div>' }); 

---

just outline expectations - looking for:

<test :data="bar"></test> <test :data="hello"></test> 

renders to

<div v-for="element in bar" ></div> <div v-for="element in hello" ></div> 

btw: participates here in :)

parent:

<test :data="foo" @onmyevent="data=$event"></test> 

child component:

vue.component('test', {     props: ['data'],     template: '<div @click="$emit(\'onmyevent\', \'bar\')"></div>' }); 

see docs

based on edits:

//parent <template>     <div>         <test :data="foo"></test>         <test :data="bar"></test>         <!-- or -->         <test v-for="item in [foo, bar]" :data="item"></test>     </div> </template> <script>     import test './test.vue'     export default{         data(){             return {                 foo: ['foo-0', 'foo-1', 'foo-2', 'foo-3'],                 bar: ['bar-0', 'bar-1', 'bar-2', 'bar-3'],             }         },         components: {             test: test         }     } </script> //child component <template>     <div>         <div v-for="element in data">{{ element }}</div>     </div> </template> <script>     export default{         props: ['data'],     } </script>