Vue 3 - «это» ссылается на методы, а не на приложение

У меня возникли проблемы с созданием метода удаления элемента из массива с помощью Vue 3. Метод выполняется правильно, но «это» относится к «методам».

<div id = "blog-posts-demo">
    <div class = "container">
        <div class = "row">
            <blog-post class = "col-4"
                       v-for = "post in posts"
                       v-bind:id = "post.id"
                       v-bind:key = "post.id"
                       v-bind:title = "post.title">
            </blog-post>
        </div>
    </div>
</div>

<button onclick = "App.methods.remove(3)">
    Delete Item
</button>

@section Scripts {

    @*<script src = "~/js/signlartest.js"></script>*@

    <script src = "~/js/vue/vue.global.js"></script>

    <script type = "text/javascript">

        var App = {
            data() {
                return {
                    name: 'Cards',
                    posts: [
                        { id: 1, title: 'Card 1' },
                        { id: 2, title: 'Card 2' },
                        { id: 3, title: 'Card 3' },
                        { id: 4, title: 'Card 4' },
                        { id: 5, title: 'Card 5' },
                        { id: 6, title: 'Card 6' },
                        { id: 7, title: 'Card 7' },
                        { id: 8, title: 'Card 8' },
                        { id: 9, title: 'Card 9' },
                        { id: 10, title: 'Card 10' }
                    ]
                }
            },
            methods: {
                remove(itemId) {
                    console.info('this: ' + this);
                    console.info('app.name ' + App.name);
                    console.info('itemId ' + itemId);
                }
            }
        }

        const app = Vue.createApp(App);

        app.component('blog-post', {
            props: ['title', 'id'],
            template: `
<div class='card'>
    <h4>
        {{ title }}
    </h4>
</div>
`
        })

        app.mount('#blog-posts-demo')

    </script>

} 

Вот вывод, когда я нажимаю кнопку «Удалить элемент»:

это: [объект Объект]

(индекс): 104 app.name не определено

(индекс): 105 itemId 3

Согласно всей документации и примерам, которые я нашел, в текущем контексте «это» должно относиться к объекту данных. Может кто-нибудь сказать мне, что я делаю неправильно?

Моя конечная цель — иметь возможность добавлять/удалять/обновлять модели извне, управляемые Vue.

Спасибо!