vue对数组带下标的修改，页面监控不到的问题

<template>
	<div class="test">
		
      <div>
          <div v-for="(item,index) in imgList.one" :key="item">
            {{item}}
             <div @click="deleteClick('one',index)">删除</div>
         </div>
          <div @click="FunClick('one')">增加</div>
      </div>
      <div @click="FunClick('two')">two</div>
      <div @click="FunClick('three')">three</div>
      <div @click="FunClick('four')">four</div>

    </div>
	</div>
</template>
<script>
	export default {
		data(){
			
            imgList:[]
			}
		},
		methods:{
      deleteClick(state,index){
         this.imgList[state].splice(index,1)
      },
      FunClick(state){
        let url='hh'
        if(this.imgList[state]&&this.imgList[state].length){
          this.imgList[state].push(url)
        }else{
          //由于通过下标push改变数据的，页面上监控不到，需要$set刷新，
          // 调用方法：this.$set( target, key, value )
          // target：要更改的数据源(可以是对象或者数组)
          // key：要更改的具体数据
          // value ：重新赋的值
          this.$set(this.imgList,state,[])
          this.imgList[state].push(url)
        }
        console.log('ksksksk',this.imgList);
      }

		}
	}
</script>

同下面链接中的情况

https://www.jianshu.com/p/6f28f5abee08