How to dynamically import component when related radio button is checked

In this part of my project, I want to load related payment gateway component after user selects one of available radio buttons.

So there are 5 available payment gateways (as radio buttons) and user must select one of them to see rest of the current step!

By doing some searches on Google I found a solution; and with this solution, when I load page it works perfectly.
However, when I choose “PayPal” payment gateway (radio button), nothing changes!

Since I placed defineAsyncComponent(() => import(`../PaymentGateways/${data.payments}`)) inside computed, I expect it changes every time a different radio button is selected and reactive data changes.
Unfortunately this doesn’t happen!

Anyone here can help me please with dynamically load component every time user selects a different radio button.

If anyone has any solution for this problem please comments below. Thank you.

I also placed my code down below. Let me know if there is any information missing in this thread.


<template>
    <div class="w-full min-w-[420px] h-fit bg-white rounded shadow-sm-spread flex-1 base-1">
        <!-- Section Header -->
        <div class="w-full px-4 py-6 capitalize font-semibold text-sm tracking-wider text-smooth-black opacity-90 border-b border-thin-black">
            <h3>3. Payment Method</h3>
        </div>

        <!-- Payment gateway options -->
        <div class="w-full relative border-b border-thick-black last:border-0">
            <div class="w-full p-6 flex flex-row flex-wrap gap-6 select-none">
                <!-- Credit Cart (e.g. VISA & MasterCart) payment method -->
                <div class="relative w-full min-w-[180px] min-h-[100px] flex-1 base-1 bg-white rounded shadow-sm-spread border border-thin-black p-4">
                    <input id="credit_card" type="radio" v-model.lazy="data.payments" value="CreditDebitCard" name="payment_method" class="w-4 h-4 text-blue z-0 border-thick-black focus:ring-0">
                    <label for="credit_card" class="rounded p-4 z-10 absolute flex flex-row justify-between items-end text-sm capitalize font-medium text-smooth-black w-full h-full top-0 left-0 cursor-pointer">
                        credit card
                    </label>
                </div>
                <!-- PayPal payment method -->
                <div class="relative w-full min-w-[180px] min-h-[100px] flex-1 base-1 bg-white rounded shadow-sm-spread border border-thin-black p-4">
                    <input id="paypal_payment" type="radio" v-model.lazy="data.payments" value="PayPal" name="payment_method" class="w-4 h-4 text-blue z-0 border-thick-black focus:ring-0">
                    <label for="paypal_payment" class="rounded p-4 z-10 absolute flex items-end text-sm capitalize font-medium text-smooth-black w-full h-full top-0 left-0 cursor-pointer">
                        PayPal
                    </label>
                </div>
                <!-- AfterPay payment method -->
                <div class="relative w-full min-w-[180px] min-h-[100px] flex-1 base-1 bg-white rounded shadow-sm-spread border border-thin-black p-4">
                    <input id="afterpay_payment" type="radio" v-model.lazy="data.payments" value="afterpay" name="payment_method" class="w-4 h-4 text-blue z-0 border-thick-black focus:ring-0">
                    <label for="afterpay_payment" class="rounded p-4 z-10 absolute flex items-end text-sm capitalize font-medium text-smooth-black w-full h-full top-0 left-0 cursor-pointer">
                        AfterPay
                    </label>
                </div>

                <!-- ZipPay payment method -->
                <div class="relative w-full min-w-[180px] min-h-[100px] flex-1 base-1 bg-white rounded shadow-sm-spread border border-thin-black p-4">
                    <input id="zippay_payment" type="radio" value="zippay" v-model.lazy="data.payments" name="payment_method" class="w-4 h-4 text-blue z-0 border-thick-black focus:ring-0">
                    <label for="zippay_payment" class="rounded p-4 z-10 absolute flex items-end text-sm capitalize font-medium text-smooth-black w-full h-full top-0 left-0 cursor-pointer">
                        ZipPay
                    </label>
                </div>
                <!-- Google Pay payment method -->
                <div class="relative w-full min-w-[180px] min-h-[100px] flex-1 base-1 bg-white rounded shadow-sm-spread border border-thin-black p-4">
                    <input id="gpay_payment" type="radio" value="gpay" v-model.lazy="data.payments" name="payment_method" class="w-4 h-4 text-blue z-0 border-thick-black focus:ring-0">
                    <label for="gpay_payment" class="rounded p-4 z-10 absolute flex items-end text-sm capitalize font-medium text-smooth-black w-full h-full top-0 left-0 cursor-pointer">
                        Google Pay
                    </label>
                </div>
            </div>
        </div>

        <div class="w-full h-[200px] relative">
            <component :is="getters.PaymentGateway"></component>
        </div>

    </div>
</template>
<script setup>
    import { defineAsyncComponent, reactive, computed } from "vue"

    const props = defineProps({
    })

    const data = reactive({
        payments: "CreditDebitCard"
    })
    
    const getters = computed(() => {
        return {
            PaymentGateway: defineAsyncComponent(() => import(`../PaymentGateways/${data.payments}`))
        }
    })
</script>

Hi,

While I can’t explain why reactivity is lost (edit: can’t explain why your solution is not working), if the problem it only about conditionally loading a component depending of the value of a radio button I’ve found the solution below.

Example

Summary

This text will be hidden

Hi thank you for your solution.
I exactly didn’t understand, what do you mean reactivity is lost? Can you please tell me what that means?
Thank you.