Change page description in Vue 3.

ChangeDescription.vue

<template></template>
<script setup>
import { watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n({ useScope: 'global' });

const props = defineProps({
	description: {
		type: String,
		default: '',
	},
});

const el = document.querySelector('head meta[name="description"]');

onMounted(() => {
	el.setAttribute('content', t(props.description));
});

watch(
	() => locale.value,
	(lang) => {
		el.setAttribute('content', t(props.description));
	}
);

watch(
	() => props.description,
	(lang) => {
		el.setAttribute('content', t(props.description));
	}
);
</script>

<!--
// Required in main.js createI18n(options)
allowComposition: true,
globalInjection: true,
legacy: false,
-->