Update the input value ( v-model ) in vuejs

Question

I'm trying to update the value of product unit(KG), but problem which i'm facing, in the same component when i'm trying to update the value it will reflect in my input box but after click add to cart and update the same value (like for PC unit) it will not reflect the updated value into cart component. So can anyone tell me how to pass the value? So all time when user come back to product component and update the value, it will reflect to the cart component.

product component

<template>
<div>
       <div v-if="prod.unit === '1 KG'">
          <div class="column is-4 prod-set-unit">
            <div><input type="number" placeholder="KG" v-model="prod.kg"  /></div>
            <div class="verticalLine"></div>
            <div><input  type="number" placeholder="GM" v-model="prod.gm"  /></div>
          </div>
        </div>

       <div class="columns">
         <div class="column">
           <button v-if="!isProdInCart(prod)" @click="addToCart(prod)" class="button is-medium is-info is-rounded">Add to cart</button>
          <div v-else class="columns">
            <div class="column is-6">
              <b-numberinput v-if="isPC(prod.unit)" :value="getProdQtyInCart(prod)" @input="updateProductQty($event)" type="is-info" min="1" max="999"></b-numberinput>
              <input readonly class="prod-price " v-if="isKG(prod.unit)"  type="number" :value="productQty"  />
            </div>
          </div>
        </div>
      </div>
</div>
</template>

<script>
import ProductTile from '../products/HomeProductTile';
export default {
  name: 'productDetails',
  components: {
    ProductTile,
  },
  data() {
    return {
      basket: this.$root.basket,
      prod: this.$user.setProdDetails,
    };
  },
method: {
updateProductQty(value) {
      const storeId = this.$user.currentStoreId;
      const cart = JSON.parse(JSON.stringify(this.basket[storeId] || {}));

      let commonParams = { token: this.$user.token, prodId: this.prod.id, cartId: this.$user.cartId, userId: this.$user.user.id };
      this.$http
        .put(`/carts/${this.$user.cartId}/product/${this.prod.id}`, {
          ...commonParams,
          qty: this.prod.unit === this.prod.PC ? value : this.productQty,
        })
        .then((res) => {
          console.log('response', res);
          this.prod.qty = value;
          cart[this.prod.id] = this.prod;
          this.$set(this.basket, storeId, cart);
          this.$user.basket = this.basket;
          console.log('Added. Basket =', this.basket);
        });
 
      },
 computed: {
    productQty: function() {
      return (Number(this.prod.kg) * 1000 + Number(this.prod.gm)) / 1000;
    },
  },
}
    },
}
</script>

ProductCart component

<template>
      <div v-if="prod.unit === '1 KG'">
        <div class="has-text-centered prod-set-unit" v-if="$route.path !== '/'">
          <div><input class="has-text-grey input-style" type="number" placeholder="KG" :value="prod.kg" @input="productQty" /></div>
          <div class="verticalLine"></div>
          <div><input class="has-text-grey input-style" type="number" placeholder="GM" :value="prod.gm" @input="productQty" /></div>
        </div>
      </div>
      </div>
</template>
<script>
export default {
  name: 'productCart',
props: {
    prod: Object,
    prodId: String,
  },
  data() {
    return {
      basket: this.$root.basket,
    };
  },
methods: {
/* updateProductQty logic ....*/
},
computed: {
      productQty() {
        return (Number(this.prod.kg) * 1000 + Number(this.prod.gm)) / 1000;
      },
    },
}
</script>

cart component

<template>
 <div v-if="!isCartEmpty()" >
          <div class="card" v-for="(prod, key) in this.$root.basket[this.$user.currentStoreId]" :key="key">
            <CartProduct :prod="prod" :prodId="key" />
          </div>
        </div>

</template>

<script>
import CartProduct from '../components/cart/Product.vue';

export default {
  name: 'cart',
  components: {
    CartProduct,
  },
  methods: {
    isCartEmpty() {
      const cart = JSON.parse(JSON.stringify(this.$root.basket[this.$user.currentStoreId] || {}));
      console.log(Object.keys(cart).length);
      if (Object.keys(cart).length === 0) {
        return true;
      }
      return false;
    },
  },
  created() {
    this.$root.basket = this.$user.basket;
  },
  computed: {
    cartSize() {
      const cart = JSON.parse(JSON.stringify(this.$root.basket[this.$user.currentStoreId] || {}));
      return Object.keys(cart).length;
    },
  },
  watch: {
    basket: {
      deep: true,
      handler: function () {
        console.log('basket changed');
      },
    },
  },
};
</script>