События VueJS независимых компонентов

Question

У меня есть компонент, который генерирует событие через шину, как указано ниже. Один и тот же компонент необходимо дважды включить в другой компонент. Я хочу, чтобы генерируемые события заполняли разные переменные;

    //component.vue
    <template>
        <div>
            Hello there?
            <a @click="changed">New</a>

            <ol>
               <li v-for="option in list">
                   <div class='row justify-content-start'>
                      <div class='col-sm-6'><input v-model="option.value" type='text' placeholder="key"/></div>
                      <div class='col-sm-6'><input v-model="option.name" type='text' placeholder="Name"/></div>
                   </div>
               </li>
            </ol>
        </div>
    </template>
    <script>
      export default{
            props:['options','iscolumn'],
            data(){
                  return {list:this.options,item:{name:'',value:''}}
            },
            methods:{
                  changed(){
                        $bus.$emit('add-option',this.item,this.iscolumn);
                  }
            }
      }
    </script>
/** root.vue **/

<template>
      <div>
            <h3>Rows</h3>
            <div><rows :options="rows" :iscolumn="false"/></div>


            <h3>Columns</h3>
            <div><rows :options="columns" :iscolumn="true" /></div>
      </div>
</template>

<script>
      export default{
            components:{'rows':require('./component')},
            data(){
                  return {
                        columns:[],rows:[]
                  }
            },
            created(){
                  this.$bus.$on('add-option',(option,iscolumn)=>{
                        if (is_column) {this.columns.push(option);}
                        else this.rows.push(option);
                  })
            }
      }
</script>

Когда я нажимаю Новый от корня, столбцы и строки заполняются. Ища случай, когда каждый из компонентов независим, не могу понять, как они разделяют переменные. Любая помощь будет оценена.

Answer 1

Назначение уникальных ключевых атрибутов компонентам rows:

<template>
    <div>
        <h3>Rows</h3>
        <div><rows key="rows1" :options="rows" :iscolumn="false"/></div>

        <h3>Columns</h3>
        <div><rows key="rows2" :options="columns" :iscolumn="true" /></div>
    </div>
</template>