Изменять переменную одновременно в нескольких компонентах Vue js

Есть родительский компонент, в нем есть переменная которая отвечает за состояние чекбокса. Чекбокс это дочерний компонент и нужно чтобы в случае изменения переменной в род. компоненте эта переменная менялась также в дочернем компоненте

Род. компонент

<template>
  <div class="new-products">
      <div>
        <CheckBoxInput
          @checked="checkedPrice"
          id="product-price"
          :model="modal.purchaseAgreement.price"
        />
      </div>
  </div>
</template>

<script>
import CheckBoxInput from "@/components/inputs/CheckBoxInput";

export default {
  components: {
    CheckBoxInput,
  },
  data() {
    return {
      modal: {
        purchaseAgreement: {
          price: false,
        },
      },
    };
  },

  methods: {
    checkedPrice(model) {
      this.modal.purchaseAgreement.price = model;
    },
  },
};
</script>

Дочерний компонент

<template>
  <div>
    <input
      :id="id.replace(' ', '')"
      v-model="model"
      type="checkbox"
      @input="v && v.$touch()"
      @click="checkedInput"
    />
  </div>
</template>

<script>
export default {
  name: "CheckBox",
  props: {
    id: {
      type: String,
      default: "id" + parseInt(Math.random() * 1000),
    },
    model: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: this.model,
    };
  },
  methods: {
    checkedInput() {
      this.active = !this.active;
      this.$emit("checked", this.active);
    },
  },
};
</script>

Мой вариант работает, но с багом, из-за чего при очистке переменной в главном компоненте, дочерний не меняется с первого раза