Offizielle Dokumentation besagt, dass Requisiten nicht innerhalb untergeordneter Komponenten geändert werden sollten

Vue.component('todo-list',{
    props:['msg'],
    template:'<li>{{msg.text}}<button @click="fun">click</button></li>',
    methods:{
        fun:function(){
            alert(this.msg.text='芒果');
        }
    }
});
        
new Vue({
    el:'#app',
    data:{
        grocery:[
            {text:'苹果'},
            {text:'香蕉'},
            {text:'菠萝'}
        ]
    }
});

<p id="app">
    <ol>
        <todo-list v-for="(item,index) in grocery" key="index" :msg="item"></todo-list>
    </ol>
</p>

Ich weiß nicht, ob ich die Requisite innerhalb der Unterkomponente so ändere? Es wurde jedenfalls kein Fehler gemeldet.
Was meinst du also mit dem Ändern von Requisiten innerhalb einer Unterkomponente?

Manche Leute sagen, dass der Wert der übergeordneten Komponente nicht geändert wird

Vue.component('todo-list',{
    props:['msg'],
    template:'<li @click="funn">{{msg.text}}<button @click.stop="fun">click</button></li>',
    methods:{
        fun:function(){
            alert(this.msg.text='芒果');
        },
        funn:function(n){
            alert(this.msg.text);
        }
    }
});

Ich werde immer verwirrter, hat sich das nicht geändert? Bitte erläutern Sie die konkreten Punkte