i'm trying to use filter in vue.js 3 to filter data into upper case but this error show when any filter?!! i tried lot of solutions but no way

main.js:

import Vue from "vue";

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import "bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

import "./scss/main.scss";

import "normalize.css";



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

    });

component that i use filter:

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

    

    <script>

    export default {

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

      name: "BlogPost",

    };

    </script>

could u help me