Vue js sweetalert 2 modal Issue

I'm posting this issue for the second time because I didn't find a solution yet..

I'm using sweetalert2 plugin to display alerts in my project

anyway , I passed a component in the html key with a prop but the value is not rendered in the child component..

I have an array called balance that I want to pass

that's the code

     swal.fire({
     type: 'info',
     title: 'Attention... ',
     customClass: 'swal-btns',
     html: `<content-display :balance="${JSON.stringify(this.balance)}"> </content-display>`,
     showConfirmButton: true,
     confirmButtonText: ' Passer une commande du reliquat',
     showCancelButton: true,
     cancelButtonText: 'Ignorer le reliquat'

     })

and this is my child component ( just a simple table to loop through the data )

<template>
    <div>
        <p> <b> NB : </b> Le tableau ci dessous présente les quantités restantes à préparer pour chaque produit </p>
        <table class="table">
            <thead>
                <tr>
                    <th>Nom Produit</th>
                    <th>Quantité réstante</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="bal in balance" v-if="balance.length > 0 && balance">

                    <td class="text-left">{{bal.name}} </td>
                    <td class="text-left">{{bal.qty }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="checkbox"
                            class="form-check-input" id="exampleCheck1" :checked="bal.active"> </td>
                </tr>

            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        mounted() {
               console.log('Component mounted.')
          
        },
        data() {
            return {
             
            }


        },
        props: ['balance']


    }

</script>

the child component is not mounting at all and I just see JSON text displayed in the pop up

by the way when I call the component outside of the modal everything works fine !