Создайте компонент Vue 3 с использованием Composition API и TypeScript, который принимает пропс `info` типа string. Используйте композиционную функцию `useInfo`, которая принимает строку `info` и возвращает вычисляемое свойство `formattedInfo`, форматирующее строку с добавлением префикса "Дополнительная информация: ". Отобразите в шаблоне компонента как исходный пропс `info`, так и `formattedInfo`.

UseInfo возвращает computed с нужным префиксом, а компонент отображает исходный prop и вычисленное значение. Строковый аргумент при этом является снимком.

<script setup lang='ts'>
import { computed } from 'vue';
const props = defineProps<{ info: string }>();
function useInfo(info: string) {
  const formattedInfo = computed(() => `Дополнительная информация: ${info}`);
  return { formattedInfo };
}
const { formattedInfo } = useInfo(props.info);
</script>

<template>
  <p>{{ props.info }}</p>
  <p>{{ formattedInfo }}</p>
</template>

Это буквальный контракт со строкой. Если info меняется после создания компонента, расширьте useInfo до getter: принимайте () => string, читайте info() внутри computed и передавайте () => props.info. Тогда связь с prop сохранится.