binding a result of mathematic operations to an input or div result in vuejs

Enrique GF :

I'm building this card and i would honestly like to actualice the price of the purchase attuning with the unities and unitary price of each product. For that i make this first:

HTML
<v-card v-if="getAllProducts.products">
        <v-container>
          <input
            type="number"
            id="purchasePrice"
            v-model='purchasePrice'
            value='0'
            style="box-shadow:3px 3px 3px 3px;width:70px;margin-left:105px"
          />
          <v-card-actions>

          <div class="numCont">
            <h3 id="price">${{ProductCard.product_price}}</h3>
            <img
              style="margin-left:195px;margin-top:10px;width:35px; height:30px"
              src="../assets/add.png"
              width="15"
              height="15"
              id="rest"
              @click="addValue"
            />
            <input
              type="number"
              id="number"
              value="0"
              style="box-shadow:3px 3px 3px 3px;width:20px;margin-left:205px"
            />
            <img
              src="../assets/rest.png"
              style="margin-left:200px;margin-top:10px;width:25px; height:25px"
              id="rest"
              @click="restValue"
            />
          </div>



        </v-container>
      </v-card>

setting up a click action modifying the input value(id='number') on increase(id='rest') or decrease(id='add') Then here the methods for this first part

 methods: {
    ...mapActions(["fetchAllProducts"]),
    addValue() {
      let value = parseInt(document.getElementById("number").value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById("number").value = value;
    },
    restValue() {
      let value = parseInt(document.getElementById("number").value, 10);
      value = isNaN(value) ? 0 : value;
      value = value < 1 ? 0 : value;
      value--;
      document.getElementById("number").value = value;
    },

  },

until here everything works perfect , but now lets say i want to look on this input value(id='number') , taking the number of unities the user wants to buy , and multiply it for the price of this product(id='price') in fact, reflecting that result in the input(id='purchasePrice') Thus on my logic i just se t a watcher like this:

watch: {
     purchasePrice(value){console.log(value);
    let priceP= Number(document.getElementById('price'));
    let unities= Number(document.getElementById('number'));
      if(unities>0){
      return value= priceP*unities
      }
     }
  }

but this final step doesn't work ...no result on tha input suppose the result should be shown at. Any advice or alternative to follow at please? thanks in advance!!!

Abdelrhman Gemi :

if you want change purchasePrice value on watcher just write like that

watch: {
     purchasePrice(value){console.log(value);
    let priceP= Number(document.getElementById('price'));
    let unities= Number(document.getElementById('number'));
      if(unities>0){
      this.purchasePrice = priceP*unities
      }
     }
  }

Other Solution.

<v-card v-if="getAllProducts.products">
    <v-container>
      <input
        type="number"
        id="purchasePrice"
        readonly
        :value=" parseFloat(ProductCard.product_price) * unities"
        style="box-shadow:3px 3px 3px 3px;width:70px;margin-left:105px"
      />
      <v-card-actions>

      <div class="numCont">
        <h3 id="price">${{ ProductCard.product_price}}</h3>
        <img
          style="margin-left:195px;margin-top:10px;width:35px; height:30px"
          src="../assets/add.png"
          width="15"
          height="15"
          id="rest"
          @click="unities++"
        />
        <input
          type="number"
          id="number"
          v-model="unities"
          style="box-shadow:3px 3px 3px 3px;width:20px;margin-left:205px"
        />
        <img
          src="../assets/rest.png"
          style="margin-left:200px;margin-top:10px;width:25px; height:25px"
          id="rest"
          @click="unities--"
        />
      </div>



    </v-container>
  </v-card>

add unities in component data and remove purchasePrice ,restValue and addValue