title: Vue.js updated property doesn't change on child component
body: <p>I have a child component which is an HTML input element. It looks like this:</p>
  <pre><code>&lt;label-input inputId=&quot;formProductId&quot;
               inputType=&quot;number&quot;
               inputName=&quot;productId&quot;
               :inputEnabled=&quot;filters.productId.options&quot;
               :label=&quot;translations['product_id']&quot;
               :placeholder=&quot;translations['product_id']&quot;
               :data=&quot;filters.productId.value&quot;
  /&gt;
  </code></pre>
  <p>LabelInput.vue file:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;form-element&quot;&gt;
          &lt;label :for=&quot;inputId&quot; :class=&quot;['form-element-title', { 'js-focused': focused }]&quot;&gt;{{ label }}&lt;/label&gt;
          &lt;input @input=&quot;updateValue($event.target.value)&quot; :type=&quot;inputType&quot; :id=&quot;inputId&quot; :name=&quot;inputEnabled ? inputName : false&quot; v-model=&quot;inputData&quot; :placeholder=&quot;placeholder&quot; @focus=&quot;focused = true&quot; @blur=&quot;focused = false&quot;&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import { Component, Prop, Vue } from 'vue-property-decorator';
  
  @Component
  export default class LabelInput extends Vue {
      @Prop({ default: () =&gt; '' }) inputId!: string
      @Prop({ default: () =&gt; '' }) inputType!: string
      @Prop({ default: () =&gt; '' }) inputName!: string
      @Prop({ default: () =&gt; '' }) label!: string
      @Prop({ default: () =&gt; '' }) placeholder!: string
      @Prop({ default: () =&gt; {} }) data!: []
      @Prop({ default: () =&gt; true }) inputEnabled!: string
  
      private inputData = this.data
      private focused = false
  
      updateValue (value: string) {
          this.$root.$emit('input', {'inputName' : this.inputName, 'inputValue' : value});
      }
  }
  </code></pre>
  
  <p>So the model is passed via filters.productId.value as data and then changed into local variable inputData.</p>
  <p>Now if I change the input value I use updateValue function which emits the input name and it's value back into parent component, which updates the original filters.productId.value value. This works fine.</p>
  <p>Now the problem is that I have a function on my parent component which resets the filters.productId.value value back to null. It looks like this:</p>
  <pre><code>clearFilters() {
      for (const [key, value] of Object.entries(this.filters)) {
          this.filters[key].value = null;
      }
  }
  </code></pre>
  <p>And now the data in my child component LabelInput doesn't change, even though filters.productId.value is null now. How do I refresh the child component?</p>