1. Create itemsCount property on your component’s data object:

   data: function {
     return {
       itemsCount: ""
     }
   }
   

2. Use v-model attribute to assign the value of your input to the itemsCount property.

   <input type="number" class="col-1 form-control" v-model="itemsCount" />

3. Refactor addToCart() function to take itemsCount value into account.

   addToCart() {
     let quantity = this.itemsCount !== "" ? this.itemsCount : 1
     this.$store.dispatch('addProductToCart', {
       product: this.product,
       quantity: parseInt(quantity)
     })
   }
   

Have you considered something like this?

<input type="number" v-model="quantity" />

And later your method

addToCart() {
  this.$store.dispatch("addProductToCart", {
    product: this.product,
    quantity: this.quantity // this.quantity here
  });
}

I have a screen like this:

So basically I am trying to add the product into the cart. Currently, I am able to do it when the button is clicked. But I also want to add it when the amount was added in the input field. So if there is no amount the quantity should be increased once and if the amount was entered like 5, after clicking the button the quantity needs to be increased 5 times.
For this my html:

<div class="row number-of-tickets">
            <input type="number" class="col-1 form-control" />
            <button class="btn button col-2" @click="addToCart()">Add to cart</button>
          </div>

And my add to cart method:

addToCart() {
            this.$store.dispatch('addProductToCart', {
                product: this.product,
                quantity: 1
            })
        }

So currently, I can add when the button is clicked but I am not able to add the amount when the input is enrtered. I am quite new in vue if you can help me, that would be great.