If a computed property is passed to props, does the computed property change when the child component's props changes?

Question

JavaScript

If in one component there is a computed property that is passed to the props of another component, then when the props of the child component changes, the values ​​of the computed property of the parent will change? Why?
Part of the code in the parent:

<template>
  <item
      v-for="item in orderElements"
      :key="item.id"
      :item="item"
      :order="order.id"
    />
</template>
<script>
  import {mapGetters} from 'vuex'
  import Item from './item.vue'

  export default {
    name: 'OrderItems',
    components: {
      Item
    },
    computed: {
      //слушаем массив с путевками в хранилище
      ...mapGetters(['waybills', 'elements']),
      //поиск по позициям в заказе
      orderElements: function() {
        let orderElements = this.order.orderElement
        for(let i = 0; i < orderElements.length; i++) {
          orderElements[i].amount = orderElements[i].amount + orderElements[i].amountDiff
          delete orderElements[i].amountDiff
        }
          if (this.elements){
            for(let i = 0; i < this.elements.length; i++){
              for(let j = 0; j < orderElements.length; j++) {
                if (this.elements[i].element.id == orderElements[j].element.id) {
                  if (this.elements[i].price !== orderElements[j].price){
                     orderElements[j].price = this.elements[i].price
                     orderElements[j].itemChange = "price"
                  }
                  if (this.elements[i].amount !== orderElements[j].amount){
                     orderElements[j].amount = this.elements[i].amount
                     if (!orderElements[j].itemChange)
                       orderElements[j].itemChange = "amount"
                     else
                       orderElements[j].itemChange = "all"
                  }
                }
              }
            }
          }
        return orderElements.filter(item => String(item.name).indexOf(this.search) !== -1)
      }
</script>

Part of the child component code (item.vue):

<template>
  <b-modal :id="'change-'+item.id">
    <b-form @submit.prevent="saveChangeItem">
      <b-row>
         <b-col cols="8">
            Цена за шт.:
             <b-form-input
               v-model="item.price"
             />
            Количество:
            <b-form-input
              v-model="item.amount"
            />
            <b-btn
              variant="success"
              type="submit"
              :disabled="checkPriceAndAmount"
            >
              Сохранить
            </b-btn>
        </b-row>
      </b-form>
    </b-modal>
</template>
<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'Item',
    props: {
      //входные параметры из родителя-данные о позиции товара
      item:{
        type: Object,
        default: function() {
          return {}
        },
      },
     order:{
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        priceChange: false,
        amountChange: false,
      }
    },
    computed: {
      ...mapGetters(['elements']),
    },
    watch: {
      'item.amount': 'changeAmount',
      'item.price': 'changePrice'
    },
    methods: {
      changeAmount: function(){
        this.amountChange = true
      },
      changePrice: function(){
        this.priceChange = true
      },
    },
  }

</script>

The result is a loop.

Answer 1

For changing props in a child component, you need to hit your hands with a stick. Copy the item
prop in the child component and work with it. Changes must be emitted to the parent of the event using $emit .