Vue.js 为什么 Vue 在将设置脚本中的计算(computed)属性渲染到模板时找不到变量

我正在迁移到Vue SFC，在使用计算(computed)属性时遇到问题.

使用以下代码，我希望创建两行，并且可以通过单击顶行(标题行)来切换底行(内容行)的可见性.

<!-- components/Note.vue -->
<script setup>
import { marked } from "marked";
import { ref, computed } from "vue";

const props = defineProps({
  id: Number,
  title: String,
  create: String,
  content: String
});

const showContent = ref(false);
const elContent = ref(null);

const scrollHeight = computed(() => {
  return elContent.value.scrollHeight + "px";
});

const markedContent = computed(() => {
  return marked.parse(content.value);
})
</script>

<template>
  <div class="row" @click="showContent=!showContent">
    <div class="col-9">{{ title }}</div>
    <div class="col-3">{{ create }}</div>
  </div>
  <div class="row" :style="{height:showContent?scrollHeight:0}" ref="elContent">
    <div class="col">{{ markedContent }}</div>
  </div>
</template>

以下是错误消息

[Vue warn]: Unhandled error during execution of render function (9)
"
"
" at <Note"
"id=27"
"title=\"1Lorem Ipsum\""
" ..."
">"
"
"
" at <App>"

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core (9)
"
"
" at <Note"
"id=27"
"title=\"1Lorem Ipsum\""
" ..."
">"
"
"
" at <App>"

Unhandled Promise Rejection: ReferenceError: Can't find variable: content

但是，如果我不使用Computed属性，而是直接在模板中使用marked.parse方法，那么一切都会顺利进行.

<!-- This is fine -->
<div class="row" :style="{height:showContent?scrollHeight:0}" ref="elContent">
  <div class="col">{{ marked.parse(content) }}</div>
</div>

我希望有人能告诉我为什么会发生这种情况，以及我应该如何在脚本设置中使用计算(computed)属性.