Vue Js Create Custom CAPTCHA Generator

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
   <div id="app">
		<div class="captcha">
			<template v-for="(char, index) in captchaChars">
				<span class="captcha-char" :key="index"
					:style="{ fontSize: char.fontSize + 'px', transform: 'rotate(' + char.rotation + 'deg)' }">
					{{ char.char }}
				</span>
			</template>
		</div>
		<button class="btn" @click="generateCaptcha">Refresh</button>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					captchaChars: [],
					characters: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
				}
			},
			mounted() {
				this.generateCaptcha();
			},
			methods: {
				generateCaptcha() {
					const chars = this.characters.split('');
					let captchaChars = [];
					for (let i = 0; i < 6; i++) {
						let char = chars[Math.floor(Math.random() * chars.length)];
						let fontSize = Math.floor(Math.random() * 10) + 20; // random font size between 20 and 30
						let rotation = Math.floor(Math.random() * 21) - 10; // random rotation between -10 and 10 degrees
						captchaChars.push({ char, fontSize, rotation });
					}
					this.captchaChars = captchaChars;
				},
			},
		});
		app.mount('#app');
	</script>
	<style>
		.captcha {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200px;
			height: 50px;
			background-color: #f0f0f0;
			cursor: pointer;
		}

.captcha-text {
			font-size: 28px;
			font-weight: bold;
			color: #333;
			text-align: center;
			transform: rotate(-10deg);
			transform-origin: center;
		}

.btn {
			margin:1rem;
			display: inline-block;
			padding: 0.5em 1em;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			color: #fff;
			background-color: #4285f4;
			border-radius: 5px;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
			cursor: pointer;
		}

.btn:hover,
		.btn:focus,
		.btn:active {
			background-color: #3367d6;
		}
	</style>
</body>

</html>