显示 Vue 组件的计算属性：[Vue 警告]

Question

我创建了一个简单的 Vue 2 组件：

Vue.component('upper', {
    props: ['value'],

    template: '#upper-template',

    computed: {
        formattedValue: function() {
            return this.value.toUpperCase();
        }
    }
});

这是模板：

<template id="upper-template">
    <span>{{ formattedValue }}</span>
</template>

当我使用它时：

<upper value="test"></upper>

它工作正常，但我收到以下警告：

[Vue 警告]：属性或方法“formattedValue”未在 实例，但在渲染期间引用。确保声明反应式 数据选项中的数据属性。 （在根实例中找到）

你能告诉我我的代码有什么问题吗？我该如何解决这个问题？我阅读了文档，但我不明白我做错了什么。

Answer 1

我的 <template id="upper-template"> 位于 new Vue({el: '#app', ... 中）（它位于 <div id="app"> 中），这就是我收到该警告的原因。