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

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 warn]: Property or method "formattedValue" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

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

Answer 1

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