¿Por qué dos componentes idénticos de Vue.js con diferentes nombres de utilería dan resultados diferentes?

Codepen.io:https: //codepen.io/xblack/pen/jXQeWv? editors = 1010

HTML parte:

<div id="app">  
  <ul>
    <child-one :one="mydata"></child-one>
    <child-two :mydataTwo="mydata"></child-two>
  </ul>
</div>

<!-- child one template -->
<script type="text/x-template" id="child-one"> 
    <ul>
      LIST ONE
      <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul>
</script> 

<!-- child two template -->
<script type="text/x-template" id="child-two"> 
    <ul>
      LIST TWO
      <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>   
    </ul> 
</script> 

JS parte:

Vue.component('child-one',{
  template:'#child-one',
  props:['one'] 
});

Vue.component('child-two',{
  template:'#child-two',
  props:['mydataTwo'] 
});

let app = new Vue({
  el:'#app',
  data:{
    welcome:'Hello World',
    mydata:[]
  },
  methods:{
    getdataApi(){
      fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
        this.mydata = r;
      }); 
    } 
  },
  mounted:function(){ 
    this.getdataApi();
  }
});

Salida

     LIST ONE
    0 Leanne Graham [email protected]
    1 Ervin Howell [email protected]
    2 Clementine Bauch [email protected]
    3 Patricia Lebsack [email protected]
    4 Chelsey Dietrich [email protected]
    5 Mrs. Dennis Schulist [email protected]
    6 Kurtis Weissnat [email protected]
    7 Nicholas Runolfsdottir V [email protected]
    8 Glenna Reichert [email protected]
    9 Clementina DuBuque [email protected] 
    LIST TWO 

Respuestas a la pregunta(1)

Su respuesta a la pregunta