update follow status after axios request in Vue 2

Question

i'm getting this error all wht innet to update the follow an unfollow button after axios request and it do this but i don't want to have any error

[Vue warn]: 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: "isfollowing"

  <template>
    <div v-if="isnot">
    <a href="#"  @click.prevent="unfellow" v-if="isfollowing" >unFellow</a>
    <a href="#" @click.prevent="fellow"  v-else >Fellow</a>
    </div>
</template>

    props:['isnot','isfollowing','follower']

My Methods

        fellow () {
            axios.post(`/@${this.follower}/follow/`)
              this.isfollowing = !this.isfollowing;
        },
        unfellow () {
            axios.post(`/@${this.follower}/unfollow/`)
              this.isfollowing = !this.isfollowing;
        },
    }

Answer 1

The prop should not be updated directly, you need to create a local variable that takes your initial status, therefore your mutations should be on the local variable, I wrote this example hopefully it helps

https://codesandbox.io/s/xoyq2w996z