[Bug] On Vue 3 + Vite no show brand image

Describe the bug On Vue 3 + Vite no show brand image

To Reproduce Use on Vue 3 with Vite

Expected behavior Show correctly the brand image

Screenshots

Environment:

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
    "@vue-flow/additional-components": "^1.1.0",
    "@vue-flow/core": "^1.1.1",
    "axios": "^1.1.3",
    "bootstrap": "^5.2.2",
    "chart.js": "^3.9.1",
    "maska": "^1.5.0",
    "vue": "^3.2.38",
    "vue-chartjs": "^4.1.2",
    "vue-paycard": "^0.7.0",
    "vue-recaptcha-v3": "^2.0.1",
    "vue-router": "^4.1.5",
    "vue-toastification": "^2.0.0-rc.5",
    "vue3-ace-editor": "^2.2.2",
    "vue3-easy-data-table": "^1.5.7",
    "vue3-google-login": "^2.0.12"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.2.5",
    "@types/node": "^16.11.56",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vue-tsc": "^0.40.7"
  }
}

Code

<template>

    <vue-paycard :value-fields="valueFieldsCard" :has-random-backgrounds="false" />
    <div class="col-12 mt-5">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" placeholder="0000 0000 0000 0000"
                v-model="valueFieldsCard.cardNumber" data-card-field v-maska="'#### #### #### ####'">
            <label for="floatingInput">Card Number</label>
        </div>
        <div class="form-floating mb-3">
            <input type="text" class="form-control" placeholder="Your Name" v-model="valueFieldsCard.cardName"
                data-card-field>
            <label for="floatingPassword">Name</label>
        </div>
        <div class="form-floating mb-3">
            <input type="number" class="form-control" placeholder="Month" v-model="valueFieldsCard.cardMonth"
                data-card-field v-maska="'##'">
            <label for="floatingPassword">Expire Month. Exp: 02</label>
        </div>
        <div class="form-floating mb-3">
            <input type="number" class="form-control" placeholder="Year" v-model="valueFieldsCard.cardYear"
                data-card-field v-maska="'####'">
            <label for="floatingPassword">Expire Year. Exp: 2022</label>
        </div>
        <div class="form-floating mb-3">
            <input type="number" class="form-control" placeholder="CVC" v-model="valueFieldsCard.cardCvv"
                id="v-card-cvv" data-card-field v-maska="'###'">
            <label for="floatingPassword">CVC</label>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref} from 'vue'

var valueFieldsCard = ref({
    cardName: '',
    cardNumber: '',
    cardMonth: '',
    cardYear: '',
    cardCvv: '',
})
</script>

guastallaigor / vue-paycard

[Bug] On Vue 3 + Vite no show brand image #51