Vuejs 父组件props一个数组到子组件，数组中的数据变化，但界面没有更新

Question

最近在做一个播放音频的列表，列表界面是一个子组件，发现通过props数据到子组件，数组中的数据变化了，可是界面没有进行更新，有点郁闷

部分代码如下：
子组件：

 props:{
      punchCardData:Array,
      pauseChildAllAudio:{
        type:Boolean,
      },
      watchSelfFlag:{
        type:Number
      }
    },
    
     watch:{
      pauseChildAllAudio(newV,oldV){
        this.pauseAll();
      },
      punchCardData(newV,oldV){
        this.mPunchCardData = newV;
        this.$nextTick(()=>{
          this.init();
        })
      }
    },

/**
       * 播放
       * @param item
       * @param index
       */
      handlePlay(item,index){
        const len = this.sounds.length;
        for(let i=0;i<len;i++){
          if(this.sounds[i]){
            this.sounds[i].pause();
            this.mPunchCardData[i].play = true;
          }

        }
        this.currentIndex = index;
        this.$set(item,'play', false);
        if(this.sounds[index]){
          this.sounds[index].play();
              this.$set(item,'duration',this.formatTime(Math.round(this.sounds[index].duration())));
          requestAnimFrame(this.step.bind(this));
          this.$emit('pauseTheOnAuido');
        }

      },

   step(){
        const  self = this;
        // Determine our current seek position.
        if(this.sounds[this.currentIndex]){
          let seek = this.sounds[this.currentIndex].seek() || 0;
          let progress = document.getElementsByClassName('progress-bar')[this.currentIndex]
          let progressDot = document.getElementsByClassName('progressDot')[this.currentIndex]
          // this.mPunchCardData[this.currentIndex].current = this.formatTime(Math.round(seek))
          this.$set(this.mPunchCardData[this.currentIndex],'current',this.formatTime(Math.round(seek)));
          progress.style.width = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + '%';
          progressDot.style.left = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + '%';
          if (this.sounds[this.currentIndex].playing()) {
            requestAnimFrame(this.step.bind(self));
          }
          if(this.mPunchCardData[this.currentIndex].current===this.mPunchCardData[this.currentIndex].duration){
            this.sounds[this.currentIndex].stop();
            this.mPunchCardData[this.currentIndex].play = true;
            this.$set(this.mPunchCardData[this.currentIndex], 'play',true);
          }
        }

      },

很不解，为啥数据变化了，可是页面上却没有展示出来。

Answer 1

this problem has solved by myself

Answer 2

修改数组内容需要用 $set
文档看这里

Answer 3

子组件用V-if就可以解决