INITIAL PROBLEM

<template>

    <div class="post-box">

        <span class="views">{{ views }}</span>

        <h3 class="title">{{title}}</h3>

        <span class="date">{{ date }}</span>

        <p class="content">{{ content }}</p>

        <div class="row">

          <div class="col-sm-6 author">

            <span class="post-author">{{author | uppercase }}</span>

          </div>

          <div class="col-sm-6 category">

            <span class="post-category">{{category}}</span>

          </div>

        </div>

      </div>

</template>

createApp(App).use(store).use(router).mount("#app");

​

    new Vue({

        router,

        store,

        render: h => h(App)

    }).$mount("#app");

    Vue.config.productionTip = false;

    Vue.filter('uppercase', function (v){

       return v.toUpperCase()

    });

SOLUTION

​

REMOVE 

new Vue({

        router,

        store,

        render: h => h(App)

    }).$mount("#app");

    Vue.config.productionTip = false;

    Vue.filter('uppercase', function (v){

       return v.toUpperCase()

AND REPLACE       

<template>

     ...

          <div class="col-sm-6 author">

            <span class="post-author">{{ uppercase(author) }}</span>

          </div>

     ...

    </template>

    <script>

    export default {

      props: ['title','content','author','category','date','views'],

      name: "BlogPost",

      computed:{

         uppercase(){

            return (v)=>{

              return v.toUpperCase()

              }

           }

     }

    };

    </script>

    });