title: Vue.js Passing a variable in a loop to another component
body: <p>As a beginner in Vue.js,I am trying to create a Todo app, but problems seems to passing a variable to another component when looping.
  i want to pass item to another embedded component.
  Here what I have with all the components:</p>
  <h2>in main.js:</h2>
  <pre><code>import Vue from &quot;vue&quot;;
  import App from &quot;./App.vue&quot;;
  import Todo from &quot;./components/Todo&quot;;
  import itemComponent from &quot;./components/itemComponent&quot;;
  
  Vue.config.productionTip = false;
  Vue.component('todo', Todo);
  Vue.component('itemcomponent', itemComponent);
  
  new Vue({
    render: h =&gt; h(App)
  }).$mount(&quot;#app&quot;);
  </code></pre>
  <h2>in App.vue:</h2>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;todo&gt;&lt;/todo&gt;
      &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot; width=&quot;25%&quot; /&gt;
    &lt;!--  &lt;HelloWorld msg=&quot;Hello Vue in CodeSandbox!&quot; /&gt; --&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  
  export default {
    name: &quot;App&quot;,
    components: {
    
  
    },
  };
  &lt;/script&gt;
  </code></pre>
  <h2>in Todo.vue:</h2>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;input type=&quot;text&quot; v-model=&quot;nameme&quot; /&gt;
      &lt;button type=&quot;click&quot; @click=&quot;assignName&quot;&gt;Submit&lt;/button&gt;
      &lt;div v-for=&quot;(item, index) in result&quot; :key=&quot;item.id&quot;&gt;
       &lt;itemcomponent {{item}}&gt;&lt;/itemcomponent&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import { itemcomponent } from &quot;./itemComponent&quot;;
  
  export default {
    props:['item'],
    data() {
      return {
        nameme: &quot;&quot;,
        upernameme: &quot;&quot;,
        result: [],
        components: {
          itemcomponent,
        },
      };
    },
    methods: {
      assignName: function () {
        this.upernameme = this.nameme.toUpperCase();
        this.result.push(this.nameme);
        this.nameme = &quot;&quot;;
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <h2>in itemComponent.vue:</h2>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;input type=&quot;text&quot; value={{item }}/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  export default {
    props: {
      item: String,
    },
    data() {
      return {};
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>what is my mistake? thanks for help.</p>