Async props not worked in child component computed property.

[shankhadevpadam]

I have a parent component that has async api data in the mounted function then the property passes into the props in the child computed and those props use in the computed property of the child component. But it doesn't work in the child component.

In the code below when I passed the departure props into the child component. And when I calculate the value using computed property inside the child component it returns 0. What is the issue with my code?

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { event } from 'vue-gtag'
import Header from '../components/steps/Header.vue'
import WizardTab from '../components/steps/WizardTab.vue'
import RegisterForm from '../components/steps/RegisterForm.vue'
import RegisterFormUniqueCheckout from '../components/steps/RegisterFormUniqueCheckout.vue'
import Addon from '../components/steps/Addon.vue'
import PaymentSummary from '../components/steps/PaymentSummary.vue'
import Api from '../api/api'
import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/css/index.css'

const departure = ref({
  package: {
    addons: [],
    discounts: [],
  },
})

const redeem = reactive({
  type: '',
  applyOn: '',
  amount: '',
})

const numberOfTrekkers = ref(1)
const paymentOption = ref('full')
const isLoading = ref(false)
const paymentDetail = ref({})
const paymentSettings = ref({})
const formValidationErrors = ref('')
const addonPackages = ref([])
const wizard = ref(null)

onMounted(() => getDeparture())

const getDeparture = async () => {
  try {
    const params = new URLSearchParams(window.location.search)

    const response = await Api.get(`/packages/departures/${params.get('did')}`)

    const result = response.data.data

    departure.value = result

    event('begin_checkout', {
      currency: 'USD',
      value: result.price,
      items: [
        {
          item_id: `SKU_${result.id}`,
          item_name: result.package.name,
          affiliation: 'Magical Nepal',
          currency: 'USD',
          item_brand: 'Magical Nepal',
          price: result.price,
          quantity: 1,
        },
      ],
    })
  } catch (error) {
    console.log(error.response.data.error)
  }
}

const changeNumberOfTrekkers = (trekkers) => {
  isLoading.value = true
  numberOfTrekkers.value = trekkers
}

const selectedPaymentOption = (option) => (paymentOption.value = option)

const applyRedeemCode = (type, applyOn, amount) => {
  redeem.type = type
  redeem.applyOn = applyOn
  redeem.amount = amount
}

const changeLoaderStatus = (status) => (isLoading.value = status)

const packagePaymentDetail = (detail) => (paymentDetail.value = detail)

const resetFormValidationsErrors = () => (formValidationErrors.value = '')

const validationErrors = (error) => {
  let errorMsg = ''

  for (const [key, value] of Object.entries(error)) {
    value.forEach((element) => {
      errorMsg = errorMsg + element + '<br>'
    })
  }

  formValidationErrors.value = errorMsg

  wizard.value.scrollIntoView({ behavior: 'smooth' })
}

const setPaymentSettings = (settings) => (paymentSettings.value = settings)

const addCheckedAddonPackageIntoCart = (addons) =>
  (addonPackages.value = addons)
</script>

<template>
  <div class="vld-parent">
    <loading
      :active="isLoading"
      :height="64"
      :width="64"
      :color="'#0089BC'"
    ></loading>

    <Header :departure="departure"></Header>

    <div class="wizard" ref="wizard">
      <wizard-tab
        index="1"
        v-if="departure.package.unique_checkout === false"
      ></wizard-tab>

      <div class="row" v-if="formValidationErrors">
        <div class="col-md-12">
          <div
            class="alert alert-danger alert-dismissible fade show"
            role="alert"
          >
            <p class="mb-0" v-html="formValidationErrors"></p>
            <button
              type="button"
              class="close"
              data-dismiss="alert"
              aria-label="Close"
              @click="resetFormValidationsErrors"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
      <div class="wizard__content">
        <div id="wz-stepOne" class="wizard__content__step">
          <div class="row">
            <component
              :payment-detail="paymentDetail"
              :departure="departure"
              @change-number-of-trekkers="changeNumberOfTrekkers"
              @change-loader-status="changeLoaderStatus"
              @apply-redeem-code="applyRedeemCode"
              @selected-payment-option="selectedPaymentOption"
              @validation-errors="validationErrors"
              @set-payment-settings="setPaymentSettings"
              :is="
                departure.package.unique_checkout
                  ? RegisterFormUniqueCheckout
                  : RegisterForm
              "
            >
              <template v-slot:addon>
                <Addon
                  @add-checked-addon-package-into-cart="
                    addCheckedAddonPackageIntoCart
                  "
                ></Addon>
              </template>
            </component>

            <payment-summary
              :departure="departure"
              :number-of-trekkers="numberOfTrekkers"
              :payment-option="paymentOption"
              :redeem="redeem"
              :payment-settings="paymentSettings"
              @change-loader-status="changeLoaderStatus"
              @package-payment-detail="packagePaymentDetail"
              :addon-packages="addonPackages"
            ></payment-summary>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Child Component

<script setup>
import { ref, computed, watch } from 'vue'
import { format, parseISO } from 'date-fns'
import {
  formatPrice,
  formatPriceTwoDecimal,
} from '../../composable/priceHelper'

const emit = defineEmits(['packagePaymentDetail', 'changeLoaderStatus'])

const props = defineProps([
  'numberOfTrekkers',
  'departure',
  'paymentSettings',
  'paymentOption',
  'redeem',
  'addonPackages',
])

const counter = ref([])

const addonTotal = ref(0)

const increment = (index, amount) => {
  ++counter.value[index]

  addonTotal.value = addonTotal.value + amount
}

const decrement = (index, amount) => {
  if (--counter.value[index] < 0) {
    counter.value[index] = 0
    return
  }

  addonTotal.value = addonTotal.value - amount
}

const brochureTotal = computed(
  () => props.numberOfTrekkers * props.departure.price
)

const addonPackageTotal = computed(() =>
  props.addonPackages.reduce((acc, obj) => {
    return (
      acc + (obj.per_person_pricing ? props.numberOfTrekkers : 1) * obj.price
    )
  }, 0)
)

const bankCharge = computed(() => {
  let amount = 0

  if (props.paymentSettings.bank_charge) {
    if (props.paymentOption == 'deposit') {
      amount = (initialPayment.value * props.paymentSettings.bank_charge) / 100
    } else {
      amount = (totalAmount.value * props.paymentSettings.bank_charge) / 100
    }
  }

  return amount
})

const initialPayment = computed(() => {
  if (props.departure.package.payment_type === 'percentage') {
    return (totalAmount.value * props.departure.package.amount) / 100
  } else {
    return props.departure.package.amount
  }
})

const specialDiscountAmount = computed(() => {
  if (props.departure.discount_type === 'percentage') {
    if (props.departure.discount_apply_on === 'final') {
      return (
        ((brochureTotal.value + addonTotal.value + addonPackageTotal) *
          props.departure.discount_amount) /
        100
      )
    }

    return (brochureTotal.value * props.departure.discount_amount) / 100
  }

  if (props.departure.discount_type === 'fixed') {
    return props.departure.discount_amount * props.numberOfTrekkers
  }

  return 0
})

const redeemDiscountAmount = computed(() => {
  let amount = 0

  if (props.redeem.type === 'percentage') {
    if (props.redeem.applyOn === 'brochure') {
      amount = (brochureTotal.value * props.redeem.amount) / 100
    } else {
      amount =
        ((brochureTotal.value +
          addonTotal.value +
          addonPackageTotal.value -
          specialDiscountAmount.value) *
          props.redeem.amount) /
        100
    }
  } else {
    amount = props.redeem.amount
  }

  return amount
})

const totalDiscountedAmount = computed(
  () => specialDiscountAmount.value + redeemDiscountAmount.value
)

const totalAmount = computed(
  () =>
    brochureTotal.value +
    addonPackageTotal.value +
    addonTotal.value -
    totalDiscountedAmount.value
)

watch(
  () => props.departure,
  () => {
    if (props.departure.package.addons) {
      for (let i = 0; i < props.departure.package.addons.length; i++) {
        counter.value[i] = 0
      }
    }
  },
  { immediate: true }
)

watch(
  [totalAmount, bankCharge, () => props.paymentOption],
  ([]) => {
    const paymentDetail = {
      total_amount: formatPriceTwoDecimal(totalAmount.value),
      bank_charge: formatPriceTwoDecimal(bankCharge.value),
      initial_payment:
        props.paymentOption === 'deposit'
          ? formatPriceTwoDecimal(initialPayment.value)
          : 0,
      addons: [],
      redeem_amount: redeemDiscountAmount.value,
      addon_packages: props.addonPackages,
    }

    if (props.departure.package.addons && addonTotal.value > 0) {
      props.departure.package.addons.forEach((addon, index) => {
        paymentDetail.addons.push({
          name: addon.name,
          count: counter.value[index],
          price: addon.price,
        })
      })
    }

    emit('packagePaymentDetail', paymentDetail)

    emit('changeLoaderStatus', false)
  },
  { immediate: true }
)
</script>

<template>
  <div class="col-lg-4">
    <div class="wizard__content__sidebar">
      <h4 class="wizard__content__sidebar__title">Your Payment Summary</h4>
      <p>
        Number of travelers: <strong>{{ numberOfTrekkers }}</strong>
      </p>
      <hr />

      <div>
        <p v-if="departure.package.addons.length">
          <strong>Optional Add On</strong>
        </p>

        <table class="table payment-addon-table">
          <tr v-for="(addon, index) in departure.package.addons" :key="index">
            <td>
              <p class="mb-0" v-text="addon.name"></p>
              <strong>{{ formatPrice(addon.price) }}</strong>
            </td>
            <td>
              <div class="quantity-group">
                <input
                  type="button"
                  value="-"
                  class="quantity-btn button-minus"
                  @click="decrement(index, addon.price)"
                />
                <input
                  type="number"
                  step="1"
                  max=""
                  :value="counter[index] || 0"
                  name="quantity"
                  class="quantity-field"
                />
                <input
                  type="button"
                  value="+"
                  class="quantity-btn button-plus"
                  @click="increment(index, addon.price)"
                />
              </div>
            </td>
          </tr>

          <tr v-if="departure.package.addons.length">
            <td colspan="2"><hr /></td>
          </tr>
          <tr>
            <td>
              <p class="mb-0">Brochure Price</p>
              <small class="text-muted"
                >Adult: {{ formatPrice(departure.price) }} x
                {{ numberOfTrekkers }}</small
              >
            </td>
            <td>
              {{ formatPrice(brochureTotal) }}
            </td>
          </tr>
          <tr class="text-danger" v-if="departure.discount_type">
            <td>
              <p class="mb-0">
                Special Discount ({{
                  departure.discount_type === 'percentage'
                    ? departure.discount_amount + '%'
                    : `${numberOfTrekkers} x ${departure.discount_amount}`
                }})
              </p>
            </td>
            <td>- {{ formatPrice(specialDiscountAmount) }}</td>
          </tr>
          <tr class="text-danger" v-if="redeem.type">
            <td>
              <p class="mb-0">
                Coupon Discount ({{
                  redeem.type == 'percentage'
                    ? redeem.amount + '%'
                    : redeem.amount
                }})
              </p>
            </td>
            <td>- {{ formatPrice(redeemDiscountAmount) }}</td>
          </tr>

          <tr v-if="paymentOption === 'deposit'">
            <td>
              <p class="mb-0">Initial Payment</p>
              <small class="text-muted">To be paid now</small>
            </td>
            <td>{{ formatPrice(initialPayment) }}</td>
          </tr>

          <tr v-if="addonPackages.length" v-for="item in addonPackages">
            <td>
              <p class="mb-0">
                {{ item.name }} ({{
                  `${item.number_of_days} ${
                    item.number_of_days === 1 ? 'day' : 'days'
                  }`
                }})
              </p>
              <small class="text-muted"
                >Trip Extension: {{ formatPrice(item.price) }}
                {{
                  item.per_person_pricing ? `x ${numberOfTrekkers}` : ''
                }}</small
              >
            </td>

            <td>
              {{
                formatPrice(
                  (item.per_person_pricing ? numberOfTrekkers : 1) * item.price
                )
              }}
            </td>
          </tr>

          <tr v-if="paymentSettings.bank_charge">
            <td>
              Bank Charge
              <span
                class="tooltip-icon"
                v-tooltip="paymentSettings.bank_charge_note"
              ></span>
            </td>
            <td>{{ formatPrice(bankCharge) }}</td>
          </tr>

          <tr class="payment-addon-table__total">
            <td>Amount Due</td>
            <td v-if="paymentOption === 'deposit'">
              <strong>{{ formatPrice(initialPayment + bankCharge) }}</strong>
            </td>
            <td v-else>
              <strong>{{ formatPrice(totalAmount + bankCharge) }}</strong>
            </td>
          </tr>
          <tr v-if="paymentOption === 'deposit'">
            <td>
              <p class="mb-0">
                Final Payment
                <span
                  class="tooltip-icon"
                  v-tooltip="paymentSettings.final_payment_note"
                ></span>
              </p>
              <small class="text-muted"
                >On
                {{
                  format(parseISO(departure.start_date), 'dd MMM, yyyy')
                }}</small
              >
            </td>
            <td>
              <strong>{{ formatPrice(totalAmount - initialPayment) }}</strong>
            </td>
          </tr>
        </table>

        <figure class="secure-payment-icon">
          <figcaption class="secure-payment-icon__caption">
            <p>
              This is a secure and SSL encrypted payment. Your card details are
              safe!
            </p>
          </figcaption>
          <img
            class="secure-payment-icon__img"
            width="200"
            src="https://www.example.com/wp-content/themes/magicalnepal/img/securepaymentcards.png"
            alt="secure-image"
          />
        </figure>
      </div>
    </div>
  </div>
</template>