Untitled

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            Vue.component("fruit-item", {
                props: ["fruit"],
                template: "<li>{{ fruit.text | uppercase }}</li>"
            })

            /* actually works
            Vue.filter("uppercase", function(value) {
                return value.toUpperCase() || "";
            })
            */

    var vm = new Vue({
        el: '#app',
        data: {
            fruits: [
                { id: 0, text: "Apfel" },
                { id: 1, text: "Banane" },
                { id: 2, text: "Birne" },
            ]
        },
        // does not work
        filters: {
            uppercase: function(value) {
                return value.toUpperCase() || "";
            }
        }
    })
        })
    </script>
    <title>VueJS</title>
</head>
<body>
    <div id="app">
        <ul>
            <fruit-item v-for="item in fruits" v-bind:fruit="item" v-bind:key="item.id"></fruit-item>
        </ul>
    </div>
</body>
</html>