Error reporting of props data binding in vue (nuxt.js)

this is the error message-sharp-sharp-sharp problem description
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: "name"
checked and probably said that it was an error in the use of props, but did not understand why. It said that two-way data binding was not allowed to cause the amount

the environmental background of the problems and what methods you have tried

nuxt.js used

related codes

/ / Please paste the code text below (do not replace the code with pictures)

      <div v-if="item.videoUrl" class="video-panel">
        <span class="title">{{ $t("companies-index.video") }}</span>
        <div class="video">
          <div @click="playpause">
            <div><van-icon ref="videoIcon" name="play" size="1rem" color="white" /></div>
            <!-- <img src="~/assets/img/vr_start.png" alt="" /> -->
          </div>
          <video ref="video" :src="$cdn(item.videoUrl)" :poster="poster">
            {{ $t("companies-index.video-error") }}
          </video>
        </div>
      </div>
      
//
playpause() {
  let myVideo = this.$refs.video
  if (myVideo.paused) {
    myVideo.play()
    this.$refs.videoIcon.name = null
  } else {
    myVideo.pause()
    this.$refs.videoIcon.name = "pause"
  }
}

what result do you expect? What is the error message actually seen?

The

function can be implemented normally. I don"t know why I reported an error and solved it

// <dialog-apply :visible.sync="dialogApplyVisible" /> // <el-dialog :visible.sync="visible" title="" :before-close="onClose" > onClose() { this.$emit('update:visible', false) }

// <dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' /> // <el-dialog :visible.sync="visible" title="" :before-close="onClose" > onClose() { this.$emit('close') }

<div v-if="item.videoUrl" class="video-panel"> <span class="title">{{ $t('companies-index.video') }}</span> <div class="video"> <div @click="playpause"> <div v-show="isIconShow"> <van-icon v-if="isIconPlay" size="1rem" color="white" name="play" /> <van-icon v-else size="1rem" color="white" name="pause" /> </div> </div> <video ref="video" :src="$cdn(item.videoUrl)" :poster="poster"> {{ $t('companies-index.video-error') }} </video> </div> </div> playpause() { let myVideo = this.$refs.video if (myVideo.paused) { myVideo.play() this.isIconShow = false this.isIconPlay = false } else { myVideo.pause() this.isIconShow = true } }