title: Render Component in loop, use Index in method of child component (VueJS)
body: <p>I have two components where some exchange of props takes place. Props is the whole todo array, which is updated by a click on the button with the "addTodo" method. Passing the array down to the child works fine. I can display the props dynamically in my p-tags, but it seems to be not possible to use it my the methods of my child component.</p>
  
  <pre class="lang-vue prettyprint-override"><code>    &lt;template&gt;
        &lt;v-app&gt;
          &lt;v-content&gt;
            &lt;h2&gt;Add a Todo&lt;/h2&gt;
            &lt;v-col cols="12" sm="6" md="3"&gt;
              &lt;v-text-field label="Regular" v-model="text"&gt;&lt;/v-text-field&gt;
            &lt;/v-col&gt;
            &lt;div class="my-3"&gt;
              &lt;v-btn medium @click="addTodo"&gt;Add Todo&lt;/v-btn&gt;
            &lt;/div&gt;
            &lt;div v-for="(todo, index) in todos" v-bind:key="index"&gt;
              &lt;HelloWorld
                v-bind:todos="todos"
                v-bind:index="index"
                v-bind:class="(todos[index].done)?'green':'red'"
              /&gt;
            &lt;/div&gt;
          &lt;/v-content&gt;
        &lt;/v-app&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      import HelloWorld from "./components/ToDo.vue";
  
      export default {
        components: {
          HelloWorld
        },
        data: function() {
          return {
            text: "",
            todos: []
          };
        },
        methods: {
          addTodo() {
            this.todos.push({
              text: this.text,
              done: false
            });
          }
        }
      };
      &lt;/script&gt;
  </code></pre>
  
  <p>This is my child component</p>
  
  <pre class="lang-vue prettyprint-override"><code>    &lt;template&gt;
        &lt;v-card max-width="250"&gt;
          &lt;v-card-text&gt;
            &lt;h2 class="text-center"&gt;{{todos[index].text}}&lt;/h2&gt;
            &lt;p class="display-1 text--primary"&gt;&lt;/p&gt;
            &lt;p&gt;{{index}}&lt;/p&gt;
          &lt;/v-card-text&gt;
          &lt;v-card-actions&gt;
            &lt;v-btn text color="deep-purple accent-4" @click="done"&gt;&lt;/v-btn&gt;
            &lt;v-btn text color="orange accent-4"&gt;Delete Task&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
      export default {
        props: ["todos", "index"],
        methods: {
          done() {
            this.todos[1].text = "bla";
          }
        }
      };
      &lt;/script&gt;
  
      &lt;style scoped&gt;
      .seperator {
        display: flex;
        justify-content: space-between;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p>I pass a whole array with objects as props, and using the index inside the p-tag works fine, but I also want to use it like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>
        methods: {
          done() {
            this.todos[index].text = "bla";
          }
        }
  
  </code></pre>
  
  <blockquote>
    <p>'index' is not defined</p>
  </blockquote>
  
  <p>Everything works fine, but I am not able use the index value inside the method. What am I doing wrong here? </p>