How to update props value dynamically?

Question

Vue.js

Component A generates products in component A-1.
There are several instances of component A in component A-1, I want to change the price (props) value for only one instance.
PS I can do it through $emit, but the price changes for all product_item in the A-1 component.

Component A

<template>
  <div class="products-item">
    <a href="#"><img :src="src" :alt="title" class="img-fluid" style="width: 100%;"></a>
    <div class="products-item-body">
      <h5><a href="#" class="text-body">{{ title }}</a></h5>
      <small>{{ composition }}</small>
        <div class="row align-items-center">
          <div class="col">
            <h5 class="mb-0" @click="getPrice">{{ price }}</h5>
          </div>
          <div class="col text-right">
            <a href="javascript:void(0);" class="addToCart" data-toggle="tooltip" data-placement="top" title="В корзину"><i class="far fa-shopping-basket"></i></a>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'composition', 'price', 'src'],
    data() {
      return {
        value: 1,
        x: 33,
        qty: 1
      }
    },
    methods: {
      move(event) {
        let rect = event.target.getBoundingClientRect();
        this.x = event.pageX - rect.left + 28;
      },
      plus() {
        return this.qty > 0 && this.qty < 99 ? this.qty++ : '';
      },
      minus() {
        return this.qty != 1 ? this.qty-- : '';
      },
      getPrice() {
        alert(this.price);
      }
    },
    computed: {
      total() {
        return this.value
      }
    }
  }
</script>

Component A-1

<template>
  <section class="popular">
    <div class="container">
      <div class="products products_slide">
        <div class="row">
          <div class="col">
            <product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="105.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
          </div>
          <div class="col">
            <product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="101.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
          </div>
          <div class="col">
            <product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="108.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
          </div>
          <div class="col">
            <product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="120.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
          </div>
          <div class="col">
            <product_item title="Lorem ipsum dolor" composition="Lorem, ipsum, dolor, sit, amet, consectetur и elit." price="101.00 с." src="/storage/uploads/img_preview_1.png"></product_item>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import popular_title from './CaptionComponent.vue';
  import product_item from './ProductItemComponent.vue';

  export default {
    components: {
      product_item
    }
  }
</script>

Sandbox

Answer 1

A simple idea how this can be implemented. Then finish it yourself. You need to think about the data structure. The price must be a number, and already substitute the currency when rendering data.
https://jsfiddle.net/lavezzi/dy3mw8bk/15/