How to pass props to input value in Vuejs

Try (with the : colon sign)

<Counter :quantity="item.quantity"/>

Before you were just passing the string "item.quanity"

I see you're modifying your prop directly:

            countUp() {                this.quantity++;            },            countDown() {                if(this.quantity > 0) {                    this.quantity--;                }            },

This is not how you do it in Vue. You need to use two way binding.

countUp() {  this.$emit('input', this.quantity+1)}countDown() {  this.$emit('input', this.quantity-1)}

and in your parent component:

<Counter :quantity="item.quantity" @input="(payload) => {item.quantity = payload}"/>

By the way, the Vue styleguide recommends to use multi-word component names: https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential (Cart = bad, MyCart = good)

We cannot change the value that we get from props, so I created a variable and put props there when mounting

Try it

<Counter :quantity="item.quantity"/>

and

<template>  <div id="counter">    <button class="minus" @click="countDown"><i :class="sum == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>    <div class="count-number"><input class="counter-content" type="number" v-model="sum"></div>    <button class="plus" @click="countUp"><i class="fas fa-plus"></i></button>  </div></template><script>export default {  props: {    quantity: Number  },  data: () => ({    sum: 0  }),  mounted() {    this.sum = this.quantity;  },  methods: {    countUp() {      this.sum++;    },    countDown() {      if(this.sum > 0) {        this.sum--;      }    },  }}</script>