为什么Vue.js允许推送到prop数组？

当我们尝试直接更改prop值时，Vue.js会显示警告，如下所示：

Vue.component('Games', {
    template: `
        <div>
            <ol>
                <li v-for="game in games">{{ game }}</li>
            </ol>
            <button @click="clear">Clear games</button>
        </div>
    `,
    props: ['games'],
    methods: {
        clear: function () {
            this.games = [];
        }
    }
});

显示的警告是：

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。

我知道为什么会发生这种情况，但是令我惊讶的是，这种情况并未发生.push()。如果我更改了向数组添加值而不是重写值的方法，则不会发出警告：

methods: {
    add: function () {
        this.games.push('Whatever');
    }
}

为什么没有警告？如何直接推动道具罚款而不是重写？