title: How to update one component from another component in vue.js
body: <p>I have web app where interface is based on vue.js 2.0.</p>
  
  <p>I have component which displays input based on select2 plugin.</p>
  
  <p>By default it shows selected options, but when user clicks on it, I show select2 to allow user modify options.</p>
  
  <p>Code looks like this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div @click="toggleEdit"&gt;
      &lt;span v-show="isEnabled"&gt;
          &lt;select
              class="form-control"
              :name="name"
              :multiple="multiple"
          &gt;
              &lt;option v-for="opt in options" :value="opt.id"&gt; {{ opt.text }} &lt;/option&gt;
          &lt;/select&gt;
      &lt;/span&gt;
      &lt;span v-show="!isEnabled"&gt;
          &lt;div v-if="selectedOptions.length === 0"&gt;
              {{ emptyText }}
          &lt;/div&gt;
          &lt;div v-for="opt in selectedOptions"&gt;
              {{ opt }}
          &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      props: {
          options: {
              type: Array,
              required: false,
              default: function() {
                  return []
              }
          },
          name: {
              required: true,
              type: String
          },
          multiple: {
              required: false,
              type: Boolean,
              default: false
          },
          emptyText: {
              required: false,
              type: String,
              default: ""
          },
          sourceUrl: {
              required: false,
              type: String,
              default: ""
          },
          enabled: {
              required: false,
              type: Boolean,
              default: false
          }
      },
  
      data() {
          return {
              isEnabled: this.enabled
          }
      },
  
      watch: {
          options: {
              handler: function() {
                  console.log(arguments)
              },
              deep: true
          }
      },
  
      mounted: function() {
          this.select = $(this.$el).find("select");
          this.select.select2();
          var that = this;
          this.select.on("change", function(e) {
              var indexMap = {};
              for(var i = 0; i &lt; that.options.length; i++) {
                  that.options[i].selected = false;
                  indexMap[that.options[i].id] = i;
              }
              var selected = that.select.select2('val');
              if(typeof selected === "string") {
                  selected = [selected];
              }
              for(var i = 0; i &lt; selected.length; i++) {
                  var index = indexMap[selected[i]];
                  console.log(index)
                  console.log(selected[i])
                  if(index !== undefined) {
                      var option = that.options[index];
                      option.selected = true;
                      that.$set(that.options, index, option);
                  }
              }
          })
          this.select.on("select2:open", function() {
              that.isEnabled = true;
          });
          this.select.on("select2:close", function() {
              that.isEnabled = false;
          });
      },
      methods: {
          toggleEdit() {
              if(this.isEnabled) return; // to pass select2 clicks
              this.isEnabled = !this.isEnabled;
              var that = this;
              this.$nextTick(function() {
                  that.select.select2("open");
              });
          }
      },
      computed: {
          selectedOptions: function() {
              console.log(this.options)
              return this.options.filter(function(option) {
                  console.log(option.selected);
                  if(option.selected === true) return true;
                  return false;
              });
          }
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>The problem is: I want to show multiple different <code>selects</code> using this component. Name attribute can be one of the following: <code>model1[field1]</code>, <code>model1[field2]</code>, ..., <code>model40[field1]</code>, ..., <code>model99[field15]</code>, where every modelN corresponds to tables in databases with it's respective fields.</p>
  
  <p>When user changes options, ajax request must be sent to server, which returns json-object like this</p>
  
  <pre><code>{
     "errorText": null or "text with error",
     "disableFields": ["model3[field4]", "model24[field15]"]
  }
  </code></pre>
  
  <p>I want to parse "disableFields" array and to disable from <code>this</code> component  <code>another</code> component.</p>
  
  <p>One way to accomplish this (pseudo code):</p>
  
  <pre><code>foreach field in disableField:
      $(document).trigger("disableField" + field);
  </code></pre>
  
  <p>And in <code>mounted</code> method of <code>this</code> component</p>
  
  <pre><code>var self = this;
  $(document).on("disableField" + this.name, function() {
      self.isEnabled = false
  })
  </code></pre>
  
  <p>Is there a better way to do this without parent component?</p>