I am working on a wordpress plugin and i have a post type cause. I created some metabox in causes post type like minimum donation accepted and maximum donation accepted. Now i passed these values from PHP to take it from metaboxes and they are retrieving the values correctly. Here is my code for retrieving the values in form_components method

    /**
     * Form components.
     *
     * @return array
     */
    public function form_components()
    {
        $settings   = wpcm_get_settings();
        $currencies = $this->getCurrencies();
        $post_id = isset($_POST['id']) ? $_POST['id'] : '';
        $causes_settings = get_post_meta($post_id, 'causes_settings', true);

        // Unserialize the data to access individual settings
        $causes_data = maybe_unserialize($causes_settings);
        $show_min_max_donation = isset($causes_data['show_min_max_donation']) ? $causes_data['show_min_max_donation'] : 0;
        $amount_min_donation = isset($causes_data['min_donation_amount']) ? $causes_data['min_donation_amount'] : 0;
        $amount_max_donation = isset($causes_data['max_donation_amount']) ? $causes_data['max_donation_amount'] : 0;
        $post_type = $post_id ? get_post_type($post_id) : '';
        return array(
            'amounts'                => $this->getPredefinedAmount(),
            'currencies'             => $currencies,
            'base_currency'          => $settings->get('base_currency', 'USD'),
            'symbols'                => $this->currency_symbols($currencies),
            'symbol'                 => webinane_currency_symbol(),
            'show_currency_dropdown' => $post_type === 'membership' ? false : $settings->get('donation_multicurrency'), //false
            'show_amounts'           => $post_type === 'membership' ? false : $settings->get('donation_predefined_amounts'), //false
            'custom_amount'          => $post_type === 'membership' ? false : $settings->get('donation_custom_amount'), //false
            'show_recurring'         => $settings->get('donation_recurring_payments'),
            'show_custom_dropdown'   => $settings->get('enable_custom_dropdown'),
            'show_causes_dropdown'   => $settings->get('enable_funds_causes_dropdown'),
            'causes_list'            => $this->get_causes_list(),
            'donation_custom_dropdown' => $settings->get('donation_custom_dropdown'),
            'show_min_max_donation'  => $show_min_max_donation,
            'min_donation_amount'    => $amount_min_donation,
            'max_donation_amount'    => $amount_max_donation,
            'format_price'           => array(
                'position'  => $settings->get('currency_position', 'left'),
                'sep'       => $settings->get('thousand_saparator', ''), // Thousand Separator
                'd_sep'     => $settings->get('decimal_separator', '.'), // Decimal separator
                'd_point'   => $settings->get('number_decimals', 0) // Decimal numbers
            ),
            'strings'                => array(
                'how_much'        => esc_html__('How much would you like to donate?', 'lifeline-donation-pro'),
                'recurring'       => esc_html__('Recurring', 'lifeline-donation-pro'),
                'one_time'        => esc_html__('One Time', 'lifeline-donation-pro'),
                'donation_amount' => esc_html__('Enter the Amount you want to donate', 'lifeline-donation-pro'),
            ),
        );
        
    }

You can see the show_min_max_donation and min_donation_amount and max_donation_amount and thse all the retrieving the values correctly but when i pass them to vue component they are showing as undefined.

<template>
  <div>
    <div class="wpcm-custm-amt-before-title">
      <slot name="before_title"></slot>
      <h3 v-if="title" class="wpcm-custm-amt-title">{{ title }}</h3>
    </div>
    <div class="wpcm-custom-amt-box-container">
      <slot name="before_box"></slot>
      <div class="wpcm-custm-amt-box" v-if="custom_amount">
        <span v-if="symbol" class="wpcm-symbl-prefix">{{ getSymbol() }}</span>
        <input 
          :value="amount" 
          @input="handleInput" 
          @keypress="isNumber($event)" 
          :placeholder="strings ? strings.donation_amount : 'Enter The Amount You Want'"
        />
        <slot name="in_box"></slot>
      </div>
    </div>
    <slot></slot>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script>
const { mapState, mapMutations } = window.Vuex;

export default {
  props: ['custom_amount', 'title', 'symbol', 'symbols', 'strings', 'display_amount'],
  data() {
    return {
      formData: window.donationFormData || {}, // Use embedded data or default to an empty object
      errorMessage: ''
    };
  },
  computed: {
    ...mapState(["amount", "currency", "recurring"]),
  },
  methods: {
    ...mapMutations(["setAmount"]),
    getSymbol() {
      return (this.symbols[this.currency] !== undefined) ? this.symbols[this.currency] : this.symbol;
    },
    isNumber(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();
      } else {
        return true;
      }
    },
    handleInput(event) {
      const value = parseFloat(event.target.value);
      const minAmount = parseFloat(this.formData.min_donation_amount);
      const maxAmount = parseFloat(this.formData.max_donation_amount);

      if (this.formData.show_min_max_donation) {
        if (value < minAmount) {
          this.errorMessage = `The minimum donation amount is ${minAmount}.`;
          this.setAmount('');
        } else if (value > maxAmount) {
          this.errorMessage = `The maximum donation amount is ${maxAmount}.`;
          this.setAmount('');
        } else {
          this.errorMessage = '';
          this.setAmount(value);
        }
      } else {
        this.errorMessage = '';
        this.setAmount(value);
      }
    }
  }
}
</script>

<style>
.error-message {
  color: red;
  margin-top: 10px;
}
</style>

What i am trying to do it that validate the input field that if the minimum or maximum values is greater than or less than the values which we set through metabox then it should throw an error and user will not be able to go to next step by clicking on next button. also here is my next button vue component:

<template>
  <div>
    <el-button 
      @click="handleProceed" 
      v-if="step < config.steps"
      :disabled="campaign_ended"
    >
      {{ text || 'Proceed' }} 
    </el-button>
  </div>
</template>

<script>
const { mapState } = window.Vuex;

export default {
  props: {
    text: String,
    campaign_ended: {
      type: Boolean,
      default: false
    },
    error_message: {
      type: String,
      default: 'Target has been achieved'
    }
  },
  computed: {
    ...mapState(['step', 'config', 'validationError'])
  },
  methods: {
    handleProceed() {
      if (this.campaign_ended) {
        this.$message({
          message: this.error_message,
          type: 'error',
          duration: 5000,
          showClose: true
        });
      } else if (this.validationError) {
        this.$message({
          message: 'Please correct the errors before proceeding.',
          type: 'error',
          duration: 5000,
          showClose: true
        });
      } else {
        this.$storemit('next');
      }
    }
  }
}
</script>