Hey Jeffrey, I hope you will be well> I am having a small issue with Select2 When the DOM loads, My Select2 is workking perfectly but when i use form wizard and goes back to Preious step in the same vue file, Select2 is destroyed.

Here is my code

GuestLayout FIle

import { ref, onMounted } from 'vue'; import ApplicationLogo from '@/Components/ApplicationLogo.vue'; import { Link } from '@inertiajs/vue3';

import '../../../public/assets/js/custom/documentation/select2.js'

onMounted(() => { // Layout partials initialization KTComponents.init(); // initializeSelect2(); })

My View file Vue Component

    <Head title="Register" />

    <form @submit.prevent="submit" class="form-inline w-100">
        <div class="text-center mb-11">
            <!--begin::Title-->
            <h1 v-if="formStep == 1" class="text-gray-900 fw-bolder mb-3">
                Account
            </h1>
            <h1 v-if="formStep == 2" class="text-gray-900 fw-bolder mb-3">
                Registration
            </h1>
            <h1 v-if="formStep == 3" class="text-gray-900 fw-bolder mb-3">
                Location
            </h1>
            <!--end::Title-->
        </div>
        <div v-if="errors">
            <p v-for="error in errors" :key="error.field" class="text-danger">{{ error }}</p>
        </div>
        <div v-if="formStep == 1">
            <div class="row">
                <div class="col-6 mb-3">
                    <InputLabel for="category" value="Category" />
                    <Select  :options="categories" id="category_id" class="form-select mt-1" v-model="form.category_id"></Select>
                    <InputError class="mt-2" :message="form.errors.category_id" />
                </div>

                <div class="col-6 mb-3">
                    <InputLabel for="industry" value="Industry" />
                    <Select :options="industries" class="form-select mt-1" v-model="form.industry_id"></Select>
                    <InputError class="mt-2" :message="form.errors.industry_id" />
                </div>
            </div>


            
        </div>

        <!-- Step 2 - Organization Information Fields: Starts-->
        <div v-if="formStep == 2">
            <div class="row">
                <div class="mb-3">
                    <InputLabel for="company_name" value="Company Name" />
                    <TextInput id="company_name" type="text" class="form-control mt-1" v-model="form.company_name"
                        required autofocus autocomplete="company_name" />
                    <InputError class="mt-2 text-danger" :message="form.errors.company_name" />
                </div>
            </div>
        </div>

        <!-- Step 2 - Organization Information Fields: End-->
        <!--begin::Submit button-->
        <div class="d-flex justify-content-between align-center mb-10">
            <!--begin::Sign up-->
            <div class="text-gray-500 text-center fw-semibold fs-6" v-if="formStep == 1">
                <Link :href="route('login')" class="btn btn-dark fw-semibold">
                Already registered?
                </Link>
            </div>
            <!--end::Sign up-->
            <PrimaryButton type="button" id="kt_sign_up_submit" class="btn btn-primary" v-if="formStep == 1"
                @click="nextStep" :class="{ 'opacity-50': form.processing }" :disabled="form.processing">
                <!--begin::Indicator label-->
                <span class="indicator-label">Next</span>
                <!--end::Indicator label-->
                <!--begin::Indicator progress-->
                <span class="indicator-progress">Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                <!--end::Indicator progress-->
            </PrimaryButton>

            <PrimaryButton type="button" id="kt_sign_up_submit" class="btn btn-dark" v-if="formStep == 2"
                @click="prevStep" :class="{ 'opacity-50': form.processing }" :disabled="form.processing">
                <!--begin::Indicator label-->
                <span class="indicator-label">Previous</span>
                <!--end::Indicator label-->
                <!--begin::Indicator progress-->
                <span class="indicator-progress">Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                <!--end::Indicator progress-->
            </PrimaryButton>

            <PrimaryButton type="submit" id="kt_sign_up_submit" class="btn btn-primary" v-if="formStep == 2"
                :class="{ 'opacity-50': form.processing }" :disabled="form.processing">
                <!--begin::Indicator label-->
                <span class="indicator-label">Next</span>
                <!--end::Indicator label-->
                <!--begin::Indicator progress-->
                <span class="indicator-progress">Please wait...
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                <!--end::Indicator progress-->
            </PrimaryButton>
        </div>
        <!--end::Submit button-->

    </form>
</GuestLayout>

The Inertia Directive and Persistent Layouts