这里是一个例子，你可以把它翻译成组合API方式。你仍然需要学习如何vue3工作。

<script setup>
const {
    productName,
    productFeatures,
    temperature,
    generatedText,
    loading,
    aviso
} = reactive({ productName: '', productFeatures: '', temperature: 0.1, generatedText: '', loading: false, aviso: false })

function generateText() {
    loading = true;
    let prompt = `This is a test ${productName}.`;
    axios.post('https://example.com', {
        model: "XXXXXX",
        logprobs: 1,
        max_tokens: 500,
        prompt: prompt,
        temperature: 0.3
    }, {
        headers: {
            'Authorization': 'Bearer XXXXXXXXXXXXX'
        }
    }).then(response => {
        generatedText = response.data.choices[0].text;
        aviso = true;
    }).finally(() => loading = false);
}
</script>

我改变了函数中加载值变为false的位置，因为如果你有一个错误，它会加载更少的值。
您可以像这样使用ref()来代替reactive()：

<script setup>
const productName = ref('')
const productFeatures = ref('')
const temperature = ref(0.1)
const generatedText = ref('')
const loading = ref(false)
const aviso = ref(false)

function generateText() {
    // Using ref instead of reactive means you need to get
    // values by .value and same way assign them.
    loading.value = true
    ...
}
</script>

Ref<T>用于简单变量，而不是对象。当你直接给.value = "bla"赋值时，它们会正常工作，但如果它是一个对象，你想更新.value.title = "bla"对象内部的值。Ref<T>不会知道你更新了.title的值，所以你失去了React性你的模板不会更新标题。
如果像这样使用Ref<T>，您不会失去React性：

const data = ref({ title: "Some title" })

data.value = { ...data.value, title: "Some new title" }

如果您不知道... spread运算符的作用，请阅读它。