differentiate names of props and iterated var in intro's component example

Author: chrisvfritz

src/v2/guide/index.md

@@ -271,9 +271,7 @@ Now you can compose it in another component's template:
 
 ``` html
 <ul>
-  <!--
-  Create an instance of the todo-item component
-  -->
+  <!-- Create an instance of the todo-item component -->
   <todo-item></todo-item>
 </ul>
 ```
@@ -295,11 +293,9 @@ Now we can pass the todo into each repeated component using `v-bind`:
 ``` html
 <div id="app-7">
   <ol>
-    <!--
-    Now we provide each todo-item with the todo object
-    it's representing, so that its content can be dynamic
-    -->
-    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
+    <!-- Now we provide each todo-item with the todo object    -->
+    <!-- it's representing, so that its content can be dynamic -->
+    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
   </ol>
 </div>
 ```
@@ -308,21 +304,22 @@ Vue.component('todo-item', {
   props: ['todo'],
   template: '<li>{{ todo.text }}</li>'
 })
+
 var app7 = new Vue({
   el: '#app-7',
   data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' }
+    groceryList: [
+      { text: 'Vegetables' },
+      { text: 'Cheese' },
+      { text: 'Whatever else humans are supposed to eat' }
     ]
   }
 })
 ```
 {% raw %}
 <div id="app-7" class="demo">
   <ol>
-    <todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
+    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
   </ol>
 </div>
 <script>
@@ -333,10 +330,10 @@ Vue.component('todo-item', {
 var app7 = new Vue({
   el: '#app-7',
   data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' }
+    groceryList: [
+      { text: 'Vegetables' },
+      { text: 'Cheese' },
+      { text: 'Whatever else humans are supposed to eat' }
     ]
   }
 })