Javascript Vue 3-mounted（）未在组件上调用？

我有一个非常简单的VUE3组件，它看起来与文档中的一些示例完全相同。代码如下：

// Typewriter.vue

<template>
  <div id="wrapper">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: "typewriter",
  props: {
    phrase: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      text: "",
    };
  },
  mounted() {
    console.log('Hello World!');
  }
};
</script>

<style scoped></style>

//Typewriter.vue
{{text}}

导出默认值{
姓名：“打字机”，
道具：{
短语：{
类型：字符串，
要求：正确，
},
},
数据（）{
返回{
正文：“，
};
},
安装的（）{
log（'helloworld！'）；
}
};

然后，我通过以下方式在另一个组件中渲染此内容：

<template>
    <p>Blah</p>
    <typewriter phrase="some text" />
</template>

<script>
import Typewriter from "@/components/Typewriter.vue";

export default {
  name: "bio",
  components: {
    Typewriter
  }
};
</script>

<style scoped></style>

废话

从“@/components/Typewriter.vue”导入打字机；
导出默认值{
姓名：“生物”，
组成部分：{
打字机
}
};

但是，

mounted（）

似乎没有被调用？如果我将其更改为

setup（）

，则方法中的任何内容都会被调用，但这当然不适用于我的情况，因为我需要访问组件上的

this

我错过了什么明显的东西吗？道歉，Vue和学习新手。

您的代码可以正常工作

你的问题在别处

如果要显示短语，请将

打字机.vue中的
文本
更改为
短语

<p>{{ phrase }}</p>

{{phrase}


您的代码使用了局部变量
text
，它只是一个空字符串。
事实证明，问题是我遵循了一个教程，在Webpack构建中（我使用的是带有Webpack的Rails应用程序），设置如下：

。。。
environment.plugins.prepend(
“定义”，
新定义插件({
__VUE\u OPTIONS\u API\uuuu:false，//这就是问题所在
__VUE_产品开发工具：错误，
})
);
...

这当然会关闭选项API并强制您使用合成API（我不是）。
无法重现问题，我看到了console.log。