title: vue js sync modifier doesn't update the input value
body: <p>I have a beginner question about sync modifier in vuejs. In my example, i want to change the value of inputs depending on focus event. The value is an Object <code>inputsData</code> and i'm getting it from the <code>app</code>. In <code>parent</code> i'm passing it to the <code>child</code> where it is rendering. I set an timer because i want to emit an server request. As you can see in the <code>handleFocusFromChild</code> Methode it change me the <code>dataToBeChanged</code> with <code>newData</code> (se also log after 4 seconds). As i understood from <a href="https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier" rel="nofollow noreferrer">vue guid</a> it should to update also the input value but it doens't, and i don't understand why, because <code>dataToBeChanged</code> have now the new values from <code>newData</code>. Can someone explain me why  and how should i do to make it work?</p>
  <p><strong>Here i'm using the the Parent:</strong></p>
  <pre><code>import Parent from &quot;./parent.js&quot;;
  
  Vue.component(&quot;app&quot;, {
    components: {
      Parent
    },
    template: `
             &lt;div&gt;
               &lt;parent :inputsData=&quot;{
                                     'firstElement':{'firstInputValue':'Hi there'},
                                     'secondElement':{'secondInputValue':'Bye there'}
                                      }&quot;&gt;&lt;/parent&gt;
             &lt;/div&gt;
              `
  });
  
  
  </code></pre>
  <p><strong>Here is the Parent:</strong></p>
  <pre><code>import Child from &quot;./child.js&quot;;
  export default {
    name: &quot;parent&quot;,
    components: {
      Child
    },
    props: {
      inputsData: Object
    },
    template: ` 
           &lt;div&gt;
             &lt;child @focusEvent=&quot;handleFocusFromChild&quot;
                    :value.sync=&quot;inputsData.firstElement.firstInputValue&quot;&gt;&lt;/child&gt;
             &lt;child @focusEvent=&quot;handleFocusFromChild&quot;  
                    :value.sync=&quot;inputsData.secondElement.secondInputValue&quot;&gt;&lt;/child&gt;
             &lt;/div&gt;
              `,
    computed: {
      dataToBeChanged: {
        get: function() {
          return this.inputsData;
        },
        set: function(newValue) {
          this.$emit(&quot;update:inputsData&quot;, newValue);
        }
      }
    },
    methods: {
      handleFocusFromChild: function() {
        var newData = {
          firstElement: { firstInputValue: &quot;Hi there is changed&quot; },
          secondElement: { secondInputValue: &quot;Bye there is changed&quot; }
        };
        setTimeout(function() {
          this.dataToBeChanged = newData;
        }, 3000);
  
        setTimeout(function() {
          console.log(this.dataToBeChanged);
        }, 4000);
      }
    }
  };
  </code></pre>
  <p><strong>Here is the child:</strong></p>
  <pre><code>export default {
    template: `
                &lt;div class=&quot;form-group&quot;&gt;
                  &lt;div class=&quot;input-group&quot;&gt;
                    &lt;input @focus=&quot;$emit('focusEvent', $event)&quot;
                           v-model=&quot;value&quot;&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              `,
    props: {
      value: String
    }
  };
  </code></pre>