مشکل در حلقه های v-for در vuejs

سلام
از روش های متفاوتی میتونین استفاده کنین اما یه مثال ساده میفرستم براتون

<ul>
        <li v-for="(user,key) in users" @click="delUser(key)">
            {{user.name}}
        </li>
    </ul>

new Vue({
        el:"#app",
        data:{
            users:[
                {
                    name:'mohammad'
                }
                ,{
                    name:'reza'
                }
                ,{
                    name:'ali'
                }
            ]
        },
        methods:{
            delUser:function (index) {
                this.$delete(this.users, index);
            }
        }
    });

میتوانی به روش زیر عمل کنی

    <p v-for="(person,index) in persons" @click="deletePerson(index)">
        {{person.first_name}}
    </p>

    methods:{
        deletePerson: function(index) {
            this.persons.splice(index, 1);
         }
    }

به شکل خلاصه تر اینطوری هم میتونی پیاده سازیش کنی

<ul>
<li v-for="(user, index) in users">
  {{ user.name }} <button v-on:click="users.splice(index, 1)">remove</button>
</li>
</ul>

خییلی ممنون از پاسخ هایی که دادید، واقعا سپاس گذارم

@mhmd.dev
خواهش میکنم . موفق باشی