public properties in vue.js showing warning

Question

Component Code

<template lang="html">
    <div class="chat-users">
        <ul class="list-unstyled">
            <li v-for="chatuser in chatusers" class="left clearfix">
                {{ chatuser.UserName }}
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ["chatusers"],
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }
</script>
<style>

</style>

Everything works perfectly, but I am getting below warning.

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chatusers"

Answer 1

There is an explanation why prop should not be mutate in the vue documentation. If you need to mutate the state, perhaps you need a data instead.

Like:

    export default {
        data () { return { chatusers: null } },
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }