老师，下面计算属性里面，for循环里面用props中的this.data，页面就会正常显示；把this.data换成data里面的this.singerList，那么list-shortcut表就第一次显示，刷新后就不显示了呢？
props和data中的数据区别在哪里呢？

 <div class="list-shortcut">
      <ul>
        <li class="item" 
        v-for="(item,index) in shortcutList" 
        :key="index">
	        {{item}}
        </li>
      </ul>
    </div>

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      singerList: this.data,
    }
  },
  computed: {
    shortcutList () {
      let list = []
      for(let key in this.singerList){
        list.push(key.slice(0,1))
      }
      return list
    }
  }
};

下图就是this.singerList的结果，第一次显示，刷新页面就消失，this.data则无论怎么刷新都不会消失，咋回事，搞不明白