title: Vuejs : How to pass an object as prop and have the component update sub-objects
body: <p>I am trying to create a component that accepts an object as prop and can modify different properties of that object and return the value to the parent, using either sync or emit events. The example won't work, but it's simply to demonstrate what I'm trying to achieve.</p>
  
  <p>Here's a snippet of what I'm trying to achieve :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('child', {
    template: '#child',
    
    //The child has a prop named 'value'. v-model will automatically bind to this prop
    props: ['value'],
    methods: {
      updateValue: function (value) {
        //Not sure if both fields should call the same updateValue method that returns the complete object, or if they should be separate
        this.$emit('input', value);
      }
    }
  });
  
  new Vue({
    el: '#app',
    data: {
      parentObject: {value1: "1st Value", value2: "2nd value"}
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;p&gt;Parent value: {{parentObject}}&lt;/p&gt;
    &lt;child v-model="parentObject"&gt;&lt;/child&gt;
  &lt;/div&gt;
  
  &lt;template id="child"&gt;
     &lt;input type="text" v-bind:value.value1="value" v-on:input="updateValue($event.target.value)"&gt;
     &lt;input type="text" v-bind:value.value2="value" v-on:input="updateValue($event.target.value)"&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>