Vue Js Convert Hexa Color to RGB Color

<!DOCTYPE html>
<html>
<head>
   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h4>Vue.js Convert Hexa Color to RGB Color</h4>
	<div id="app">
		<label>Hex Color Code:</label>
		<input type="text" v-model="hexColor" @input="convertHexToRgb" />
		<br /><br>
		<label>RGB Color:</label>
		<span :style="{ backgroundColor: rgbColor }"> {{ rgbColor }}</span>
     </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					hexColor: "#ff0000",
					rgbColor: "rgb(255, 0, 0)",
				}
			},
			methods: {
				convertHexToRgb() {
					// remove # symbol from the hex color code
					let hexColor = this.hexColor.replace("#", "");

// convert the hex color to RGB color
					let red = parseInt(hexColor.substring(0, 2), 16);
					let green = parseInt(hexColor.substring(2, 4), 16);
					let blue = parseInt(hexColor.substring(4, 6), 16);

// set the RGB color value
					this.rgbColor = `rgb(${red}, ${green}, ${blue})`;
				},
			},
        });
		app.mount('#app');
	</script>
</body>
</html>