push関数を使って配列の中にオブジェクトを追加したい。追加後の配列を読み込んでテーブルを作成したい。

Question

前提・実現したいこと

• Vue.jsと、UIフレームワークのVuetifyを使ってアプリを作成中。
• テーブルの内容を動的に書き換えたい（情報を追加したい）が、うまくいかない。

発生している問題・エラーメッセージ

このテーブルに、
「ぶどう　750」を動的に追加したいのですが、できません。

該当のソースコード

<template>
    <div>
        <v-card>
            <v-card-title>
                くだもの
                <v-spacer></v-spacer>
                <v-text-field v-model="search" append-icon="mdi-magnify" label="検索" single-line hide-details>
                </v-text-field>
            </v-card-title>
            <v-data-table :headers="headers" :items="items" hide-default-footer :search="search">
                <template v-slot:[`item.action`]="{ item }">
                    <v-btn @click="onClickShow(item)">編集</v-btn>
                    <v-btn @click="onClickShow(item)">削除</v-btn>
                </template>
            </v-data-table>
        </v-card>
    </div>
</template>
<script>
    export default ({
        data() {
            return {
                valid: null,
                rules: {
                    required: (v) => !!v || "必須",
                },
                value: {},
                types: null,

                search: '',

                headers: [{
                        text: "名称",
                        value: "name"
                    },
                    {
                        text: "金額",
                        value: "price"
                    },
                    {
                        text: "操作",
                        value: "action"
                    },
                ],
                items: [
                    {
                        name: "リンゴ",
                        price: 110
                    },
                    {
                        name: "バナナ",
                        price: 230
                    },
                    {
                        name: "オレンジ",
                        price: 350
                    },
                ],
            }
        },
        methods: {
            onClickShow(item) {
                console.log(`${item.name}:${item.price}`);
            },
        },
        mounted() {
                this.items.push=({name:'ぶどう', price: 750})
                console.log(this.items)      
        },  
    })
</script>

試したこと

mounted()内のconsole.log(this.items) の結果を見る限り、追加処理自体はできているように見えます。

しかし、フロント側のテーブルには反映されません。

mounted()内に書くことがよくないのかと思い、
メソッド化してボタンから実行してみるなども試しましたが、結果は同じでした。

おそらく実行順序の問題のような気がするのですが、
何かいい方法はないでしょうか。

知恵を貸していただきたいです。

補足情報（FW/ツールのバージョンなど）

Vue2

Answer 1

はじめから全部mountedに書けばできました。

        data() {
            return {
                headers: [{
                        text: "名称",
                        value: "name"
                    },
                    {
                        text: "金額",
                        value: "price"
                    },
                    {
                        text: "操作",
                        value: "action"
                    },
                ],
                items: [],
            }
        },
        mounted() {
                //ここに配列を定義
                items: [
                    {
                        name: "リンゴ",
                        price: 110
                    },
                    {
                        name: "バナナ",
                        price: 230
                    },
                    {
                        name: "オレンジ",
                        price: 350
                    },
                    {
                    name: 'ぶどう',
                    price: 750
                }
                ],
                })

        },