显示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警告]：财产或方法＆＃34; formattedValue＆＃34;没有定义   实例，但在渲染期间引用。确保声明被动   数据选项中的数据属性。 （在根实例中找到）

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

Answer 1

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