title: Vuejs - How do I change the property's value when Checkbox is checked/unchecked and update the same
body: <p>I am having two components and i am trying to update the component and i am trying to change value of property based on the checkbox checked or unchecked. I am unable to change the value of the property.</p>
  <p>Here is my code:</p>
  <p><strong>ComponentA.vue</strong></p>
  <pre><code> **Template**
  
   &lt;div class=&quot;column&quot; v-for=&quot;car in cars&quot;&gt;
      &lt;label class=&quot;label&quot;&gt;
        &lt;input type=&quot;checkbox&quot; v-model=&quot;carsSelected&quot; @change=&quot;onChange&quot; &gt;
        {{ car }}
      &lt;/label&gt;
    &lt;/div&gt;
  
    **Script**
  
      data () {
         return {
           carsSelected: {},
           cars: {
            hyundai,
            maruthi,
            audi,
          }
        }
        ...
          onChange(){
        this.$emit('input', this.carsSelected)   .---&gt;  For updating
      }
  </code></pre>
  <p><strong>ComponenrB.vue</strong></p>
  <pre><code>     &lt;component-a v-model=&quot;fourWheeler.brands&quot; /&gt;
       ...
       fourWheeler: {}
  </code></pre>
  <p>And here is how <strong>fourWheeler.brands</strong> looks like:</p>
  <pre><code>     **It is an object**
         
         {
           hyundai: false,
           maruti: false,
           audi: true,
         }
  </code></pre>
  <p>I want to change the values of the car brands ie fourWheeler.brands based on checked or unchecked, if checkbox is unchecked then false, if it is checked then true. Please let me know how to update the values and better way of binding.</p>