Vue Js Change Meta Description

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<div id="app">
		<label for="description">Enter description:</label>
		<input id="description" v-model="description" type="text">
		<pre v-if="description">Update Meta Description: {{description}}</pre>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					description: ''
				};
			},
			mounted() {
				const meta = document.createElement('meta');
				meta.setAttribute('name', 'description');
				meta.setAttribute('content', this.description);
				document.head.appendChild(meta);
			},
			watch: {
				description(newDescription) {
					const metaDescription = document.querySelector('meta[name="description"]');
					metaDescription.setAttribute('content', newDescription);
				}
			}
		});
		app.mount('#app');
	</script>
	<style>
		input {
			border: none;
			border-bottom: 2px solid #ccc;
			padding: 10px;
			margin-bottom: 20px;
		}
      input:focus {
			border-bottom: 2px solid #007bff;
			outline: none;
		}
	</style>
</body>
</html>