Form.vue

<template>
<div id="run">
    <section class="py-8 leading-7 text-gray-900 sm:py-12 md:py-16 lg:py-24">
        <div class="max-w-6xl px-4 px-10 mx-auto border-solid lg:px-12">
            <div class="flex flex-col items-start leading-7 text-gray-900 border-0 border-gray-200 lg:items-center lg:flex-row">
                <div class="w-full  mt-6 lg:mt-0 rounded">
                    <div class="flex gap-2 flex-col md:flex-row center m-4">
                        <div class="relative flex-1">
                            <label for="hash" class="mt-2 text-xl text-left text-gray-900 border-0 border-gray-200 sm:text-2xl">Hash :</label>
                            <textarea id="hash" v-model="hash" name="hash" rows="30" cols="50" class="peer h-40 w-full border border-1.5 rounded-md border-gray-300 text-gray-900 placeholder-transparent focus:outline-none focus:border-red-600 focus:border-2 p-3 text-xl text-left" />
                            </div>
                    </div>
                </div>
                <div class="flex gap-2 flex-col md:flex-row center m-4">
                    <button class="inline-flex items-center justify-center w-full px-5 py-4 mt-6 ml-0 font-sans text-base leading-none text-white no-underline bg-indigo-600 border border-indigo-600 border-solid rounded cursor-pointer md:w-auto lg:mt-0 hover:bg-indigo-700 hover:border-indigo-700 hover:text-white focus-within:bg-indigo-700 focus-within:border-indigo-700 focus-within:text-white sm:text-lg lg:ml-6 md:text-xl" type="submit" @click="send()">Envoyer
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                                <polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                    </button>
                </div>
                
            </div>
            <div class="flex flex-col items-start leading-7 text-gray-900 border-0 border-gray-200 lg:items-center lg:flex-row">
                <div class="w-full  mt-6 lg:mt-0 rounded">
                    <div class="flex gap-2 flex-col md:flex-row center m-4">
                        <div v-if="isSend || isReceved" class="box-border flex-1 text-center border-solid sm:text-left">
                            <h2 class="m-0 text-4xl font-semibold leading-tight tracking-tight text-left text-black border-0 border-gray-200 sm:text-5xl">Votre mot de passe etait :</h2>
                            <p class="mt-2 text-xl text-left text-gray-900 border-0 border-gray-200 sm:text-2xl">
                                <span v-if="isSend">En cours ...</span>
                                <span v-else>{{ mdp }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</template>

<script>
export default {
    props: {
        hero: {
            titre: String,
            description: String,
            btn: {
                texte: String,
                link: String
            }
        }, 
        ws: WebSocket,
        data: {
            hash: String,
            mdp: String
        }
    },
    data() {
        return {
            mdp: "",
            hash: "",
            isSend: false,
            isReceved: false
        }
    },
    methods: {
        send() {
            this.ws.send("decrypt " + this.hash)
            this.isSend = true;
        },
        receved(hash, mdp) {
            this.isSend = false;
            this.isReceved = true;
            this.mdp = "Voici la solution au hash : " + hash + "<br/>" + mdp 
        }
    },
    watch: {
        "data" : function() {
            this.receved(data.hash, data.mdp)
    	}
  	}
}
</script>