component not rendering in production [Vue3 + Vite]

[Rafael Marques]

Hi!

I'm having some trouble to render the component after building it to production. I'm using Vue3, and the latest package of the lib. I'm using VITE also.

In dev mode, is rendering normally. But, when I run the process to build, the output file does not render the component. I've checked the files, and it has been imported correctly.

My application use it in a lot of places, so I've imported in the main.js file.

My component:

<template>
    <div class="input__container">
        <vue-tel-input :inputOptions="vueTelInputOptions.inputOptions"
                      mode="national"
                      v-bind:value="modelValue"
                      v-model="internalValue"
                      :class="[ error ? 'border-2 border-red-500 rounded' : '' ]"
                      @change="onChange"
                      @validate="onValidate"
                      @blur="onBlur"
                      @focus="onFocus">
        </vue-tel-input>
        <label v-if="label" class="input__label" :class="{'input__label-focused' : focused}">{{ label }}</label>
    </div>
</template>

<script>

export default {
    name: "InputTelephone",
    props: {
        modelValue: String,
        placeholder: String,
        label: String,
    },
    emits: ['on-validate', 'update:modelValue'],
    data() {
        return {
            valid: null,
            error: false,
            internalValue: this.modelValue,
            focused: false,
            vueTelInputOptions: {
                inputOptions: {
                    placeholder: this.placeholder,
                    styleClasses: 'tel-input'
                }
            }
        };
    },
    methods: {
        onFocus() {
            this.error = false;
        },
        onBlur() {
            if (!this.valid) {
                this.error = true;
            }
        },
        onChange(phoneObject) {
            this.$emit('update:modelValue', phoneObject.number);
        },
        onValidate(event) {
            this.valid = event?.valid;

            this.$emit('on-validate', {number: event.number, valid: event.valid});

            if (this.valid) {
                this.$emit('update:modelValue', event.number);
            }
        }
    }
}
</script>

Someone had the same problem? Can I get some help, please?