问在直接css/样式更改和从数组中删除项时，vue.js的奇怪行为

EN

var init = function() {
    var app = new Vue({
        el: '.app',
        data: {
            list: [{val: 1}, {val: 2}, {val: 3}, {val: 4}, {val: 5}],
        },
        methods: {
            delete_item: function(item) {
                var index = this.list.indexOf(item);
                this.list.splice(index, 1);
            },
        },
    });
};
var make_it_red = function() {
    document.querySelectorAll('div span')[2].style.color = 'red';
};
window.onload = init;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div class="app">
    <p>First click on make it red button and then try to delete red item.</p>
    <div v-for="i in list">
        <span>item {{i.val}}</span>
        <button v-on:click="delete_item(i)">delete</button>
    </div>
    <button onclick="make_it_red()">make it red</button>
</div>