Displaying Vue Component's computed property: [Vue warn]

Question

I created a simple Vue 2 component:

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

    template: '#upper-template',

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

Here is the template:

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

And when I use it:

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

it works fine, but I am getting the following warning:

[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)

Can you tell me what is wrong with my code and how can I fix this? I read the documentation, but I could not understand what I am doing wrong.

Answer 1

My <template id="upper-template"> was in new Vue({el: '#app', ... ) (it was placed inside <div id="app">), and that's why I was getting that warning.