要么我对Vue.js有一个基本的误解，要么我发现了一个bug。我能够在下面的最小示例中重现这个bug（？）。
组件App.vue有一个React式的message变量，它作为一个prop传递给子Child.vue。这个消息可以通过一个按钮来改变。这很好用。但是，当你在Child中提醒消息时，你总是会得到第一条消息-它根本没有更新。看起来消息只在标记中更新，而不是在JavaScript中。我真的被这种行为搞糊涂了。

App.vue

<script setup>
import { ref, computed } from "vue";
import Child from "./components/Child.vue";

let index = ref(0);
let messages = ["hi", "there", "this", "is", "strange"];

let message = computed(() => messages[index.value]);

function change_message() {
    index.value++;
    if (index.value === messages.length) {
        index.value = 0;
    }
}
</script>

<template>
    <Child :message="message"></Child>
    <div>
        <button @click="change_message">Change message</button>
    </div>
</template>

Child.vue

<script setup>
const { message } = defineProps(["message"]);
function alert_message() {
    window.alert(message);
}
</script>

<template>
    <h1>
        {{ message }}
    </h1>
    <button @click="alert_message">Alert message</button>
</template>

Demo

有一个解决方案：不要破坏Child中的props。因此编写const props = defineProps(["message"]);，然后使用window.alert(props.message);。然而，在现实世界的Vue应用程序中，这将导致代码非常臃肿。我不想一直携带props.。