我想你忘了下面的代码：

<template>
 <h1>Lets go!</h1>
 <div>
  <h1>Aktivität: {{boredInfo.activity}}</h1>
 </div>
</template>

它在你的API调用完成之前就已经调用了。所以...简单的解决方案是你可以在div或h1里面添加v-if来检查变量是否已经被api响应填充了。这是主要的问题，所以解决方案的多样性取决于你。

问题在于，您在提取完成之前访问了boredInfo.activity，而此时boredInfo仍然只是ref(null)。
或者用预期的结构初始化它，即

const boredInfo = ref({activity: null})

或者避免过早访问v-if、表达式中的三进制、可选链接（?.）等。

<h1 v-if="boredInfo !== null">Aktivität: {{boredInfo.activity}}</h1>

你可以在加载时显示加载微调器，这总是很好的。

我想解释一下为什么会出现错误Cannot read properties of null (reading 'activity')
首先，您试图访问一个在组件挂载时不存在的属性，activity属性在boredInfo对象中不存在，因此当组件呈现时，它不会期望加载该属性。
我们可以用两种方法来解决这个问题，第一种方法非常简单，在const boredInfo = ref()中添加属性名，如下所示：

const boredInfo = ref({
  activity: ''
});

此设置将忽略错误。
另一个选项是在数据尚未加载时添加加载，这意味着它将等待我们的theData方法解析，首先定义一个新变量，用于指示加载状态：

const isLoading = ref(true);

然后，我们将使用async/await等待fetch方法生成的承诺，然后将load值更改为false，因为所有数据都将被加载：

async function theData(url) {
  try {
    isLoading.value = true;
    const response = await fetch(url);
    const actualData = await response.json();
    boredInfo.value = actualData
  } catch(e) {
    console.error('Das ist der Catch Error: ', e)
  } finally {
    isLoading.value = false;
  }
};

然后我们用一个v-if来配置我们的模板，等待isLoading为false，以显示API的返回值：

<template>
    <h1>Lets go!</h1>
  <div v-if="!isLoading">
    <h1>Aktivität: {{ boredInfo.activity }}</h1>
  </div>
</template>

就这样，就是这样！
您可以在这里看到一个真实的例子