Watch triggered recursively (Help requried)

[IAmShafqatAli]

I am facing the issue with currency input, I have two sections in my component,

1. Form (contains two currency-input fields with v-model.lazy)
2. Table

Table is filled with array data, when I click edit button v-model is being filled to show the selected row data inside form.

But throws console the error " Maximum recursive updates exceeded in component. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."

Form component has following code

  <div class="container-fluid pl-4 pr-4" v-show="enablePositionList">
    {{formData}}
    <section class="shipping-form">
      <div class="form-row">
        <div class="col-xl-4">
          <label class="col-form-label  " for="quantity">{{ $root.trans('table-head.pl-amount') }}</label>
          <input id="quantity" v-model="formData.quantity" required
                 @input="clearValidation('quantity')"
                 v-maska="'###############'" class="form-control form-control border"
                 name="quantity" min="1" max="999999" type="number">
          <span class="error-text pink" v-if="validation.quantity">{{ $root.trans('validation.please-fill') }}</span>
        </div>

        <div class="col-xl-4">
          <label class="col-form-label" for="shape">{{ $root.trans('input-label.pl-shape') }}</label>
          <VueMultiselect
              id="shape" ref="shape"
              @Select="clearValidation('material')"
              v-model="formData.material"
              :options="shapes"
              label="label"
              :multiple="false"
              :preselectFirst="false"
              :allowEmpty="false"
              :hide-selected="true"
              :placeholder="$root.trans('placeholder.select-material')">
          </VueMultiselect>
          <span class="error-text pink" v-if="validation.material"> {{ $root.trans('validation.please-fill') }}</span>
        </div>

        <div class="col-xl-4">
          <label class="col-form-label  "
                 for="custom_number">{{ $root.trans('input-label.pl-tariff-number') }}</label>
          <input id="custom_number" v-model="formData.custom_rate_number"
                 @input="clearValidation('custom_rate_number')"
                 v-maska="'#### #### ###'" class="form-control form-control-sm border"
                 maxlength="13" name="custom_rate_number"
                 type="text">
          <span class="error-text pink" v-if="validation.custom_rate_number">
        {{ $root.trans('validation.please-fill') }}
      </span>
        </div>
      </div>
      <div class="form-row">
        <div class="col-xl-4">
          <label class="col-form-label">{{ $root.trans('input-label.pl-weight') }}</label>
          <div class="input-group input-group">

            <CurrencyInput v-model.lazy="formData.weight" class="form-control" ref="weight"
                           @input="clearValidation('weight')"
                           :options="{'currency': 'EUR' , 'precision': 3, 'autoDecimalDigits': false,'currencyDisplay':'hidden','locale' : localeCodeForPriceAndWeightFormatting}"/>
            <div class="input-group-append">
              <span id="basic-weight" class="input-group-text">kg</span>
            </div>
          </div>
          <span class="error-text pink" v-if="validation.weight"> {{ $root.trans('validation.please-fill') }}</span>
        </div>
        <div class="col-xl-4">
          <label class="col-form-label " for="currency">
            {{ $root.trans('table-head.pl-currency') }}
          </label>
          <VueMultiselect
              id="currency"
              v-model="formData.currency"
              :options="currencies"
              label="label"
              :multiple="false"
              :preselectFirst="false"
              :allowEmpty="false"
              :hide-selected="true"
              @Select="clearValidation('currency'); setCurrencyCode($event)"
              :placeholder="$root.trans('placeholder.select-currency')"
              track-by="id">
          </VueMultiselect>
          <span class="error-text pink" v-if="validation.currency"> {{ $root.trans('validation.please-fill') }}</span>

        </div>
        <div class="col-xl-4">
          <label class="col-form-label break-line">{{ $root.trans('input-label.pl-price') }}</label>
          <div class="input-group input-group">
            <CurrencyInput v-model.lazy="formData.price" class="form-control" ref="price"
                           @input="clearValidation('price')"
                           :options="{ 'currency': 'EUR' ,  'precision': 2, 'autoDecimalDigits': false,'currencyDisplay':'hidden','locale' : localeCodeForPriceAndWeightFormatting}"/>
            <div class="input-group-append">
              <!--              <span class="input-group-text" v-html="currencySymbolIcon"></span>-->
              <span class="input-group-text"></span>
            </div>
          </div>
          <span class="error-text pink" v-if="validation.price"> {{ $root.trans('validation.please-fill') }}</span>
        </div>
      </div>
      <div class="form-row">
        <div class="col-sm-12">
          <label class="col-form-label">{{ $root.trans('table-head.pl-description') }}</label>
          <textarea id="description" v-model="formData.description"
                    @input="clearValidation('description')"
                    class="form-control form-control-sm item" name="description"
                    rows="5"></textarea>
          <span class="error-text pink" v-if="validation.description"> {{
              $root.trans('validation.please-fill')
            }}</span>
        </div>
      </div>
      <div class="form-row">
        <div class="col-sm-2">
          <label class="col-form-label mt-1 "></label>
          <div class="mt-2">
            <button class="btn mt-3 btn-primary bg-purple white-text border-round"
                    @click="store" v-if="!editable">{{ $root.trans('button.add') }}
            </button>
            <button v-else class="btn mt-3 btn-primary bg-purple white-text border-round"
                    @click="update">
              {{ $root.trans('button.update') }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <section class="shipping-table" v-if="position_lists.length > 0">
      <table id="createTicketPositionList" class="shadow bg-white table w-100">
        <thead>
        <tr class="table-head">
          <th>#</th>
          <th>quantity</th>
          <th>Material</th>
          <th>Tariff Number</th>
          <th>Weight</th>
          <th>Description</th>
          <th>Price</th>
          <th class="text-center">operation</th>
        </tr>
        </thead>
        <tbody class="mb-2">
        <tr v-for="(item, index) in position_lists" :key=item.id>
          <td>{{ index + 1 }}</td>
          <td>{{ item.quantity }}</td>
          <td> {{ item.material.label }}</td>
          <td> {{ item.custom_rate_number }}</td>
          <td>{{ this.formatPriceAndWeight(item.weight, 'weight') }}</td>
          <td>
            <div class="d-flex">
             <span class="p-1">
                <Popper class="light pointer"
                        :key="item.id"
                        placement="bottom"
                        :arrow="true" :hover="true"
                        :disable-click-away="false"
                        :content="item.description">
                <span class="fa fas fa-info purple icon-pink-dark"></span>
              </Popper>
             </span>
              <span class="p-1 d-inline-block text-truncate" style="max-width: 100px;">{{ item.description }}</span>
            </div>
          </td>
          <td>
            {{
              this.formatPriceAndWeight(item.price, 'price') + '( ' + item.currencyObject.code + '-' + item.currencyObject.symbol + ' )'
            }}
<!--            // " this.formatPriceAndWeight(item.price, 'price') + '( ' + item.currencyObject.code + '-' + item.currencyObject.symbol + ' )'"-->

          </td>
          <td>
            <div class="d-flex justify-content-around">
              <a class="p-0" @click.prevent="edit(index, item)">
                <i class="fas fas fa-pen btn-icon warning-yellow pointer fa-1x"></i>
              </a>
              <a class="p-0" @click.prevent="destroy(index, item)">
                <i class="fas fa-trash-alt pink pointer"></i>
              </a>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </div>

Code to fill formData on clicking edit button

edit(index, item) {
    this.editable = true
    this.current_item_index = '';
    this.current_item_index = index;
    this.setFormData(item);
  },
  clearFormData() {
    this.formData = {
      quantity: '',
      description: '',
      material: '',
      custom_rate_number: '',
      currency: '',
      currencyObject: [],
    };

  setFormData(item) {
    this.clearFormData();
    this.formData.quantity = item.quantity;
    this.formData.description = item.description;
    this.formData.price = item.price;
    this.formData.weight = item.weight;
    this.formData.material = item.material;
    this.formData.custom_rate_number = item.custom_rate_number;
    this.formData.currency = item.currency;
    this.formData.currencyObject = item.currencyObject;
  },

Anything that I am missing

currency-input component has following code

<template>
  <input ref="inputRef"/>
</template>

<script>
import {watch} from "vue"
import {useCurrencyInput} from "vue-currency-input"

export default {
  name: "CurrencyInput",
  props: {
    modelValue: Number, // Vue 2: value
    options: Object
  },
  setup(props) {
    const {inputRef, setOptions, setValue} = useCurrencyInput(props.options)

    watch(
        () => props.modelValue, // Vue 2: props.value
        (value) => {
            setValue(value)
        }
    )

    watch(
        () => props.options,
        (options) => {
          setOptions(options)
        }
    )

    return {inputRef}
  }
}
</script>

I still cannot figure out why watch inside currency input is being triggered multiple times. I would really appreciate if you anyone can guide me with this issue,

[IAmShafqatAli]

I have forgot to mention that the issue is fixed by using flush: 'post' inside watch.

watch(source, callback, { flush: 'post' })