title: How can I make a value modified in a child component available to the parent?
body: <p>This is my simple component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="input-group colorpicker-component"&gt;
          &lt;input type="text" v-model="color" class="form-control"/&gt;
          &lt;span class="input-group-addon"&gt;&lt;i&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: {
              value: {type: String},
          },
          data() {
              return {
                  color: this.value,
              }
          },
          mounted: function() {
              var self = this
              $(self.$el).colorpicker()
          },
          beforeDestroy: function() {
              $(this.$el).colorpicker('hide').colorpicker('destroy')
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>It gets initiated like this:</p>
  
  <pre><code>&lt;color-picker v-model="imageBackground"&gt;&lt;/color-picker&gt;
  </code></pre>
  
  <p>How do I get back the color that I have picked inside of component in the parent? This component can be used many times in parent.</p>
  
  <p>How can I keep the parent updated with value picked in color-picker component?</p>
  
  <p>I've run into a problem with Bret's suggestion:</p>
  
  <p>What happens is I am using color picker a jquery plugin so I have to do this inside mounted:</p>
  
  <pre><code>    mounted: function() {
          var self = this
          $(self.$el).colorpicker()
  
          $(self.$el).on('changeColor', function(event) {
              self.color = $(self.$el).colorpicker('getValue')
          })
  
      },
  </code></pre>
  
  <p>I register on changeColor event listener and wire it up with color data property. That works fine the input gets correct value and this.color gets correct value, but the problem is that If I pick color value by using color picker plugin it is not not broadcast to the parent, parent sees it only if I type it by hand or if I after I picked it with color picker add a space at the end of value already there, then it gets back to parent correctly.</p>