title: Can not render Strings from my Array (stored in Root-Component) to a child component
body: <p>I want to create a todo list in which the tasks are dynamically output from an array with different objects.</p>
  <p>somewhere i must have a bug in the probs. i can't get the data from the array up to aufgabenTask.vue component. Anyway the are not output.</p>
  <p>Attached is a photo of the error message in devtools from the browser and a photo of how it should actually look.</p>
  <p><a href="https://i.stack.imgur.com/MXbrz.png" rel="nofollow noreferrer">how it should look like</a>
  <a href="https://i.stack.imgur.com/zGyVV.png" rel="nofollow noreferrer">Warning from devtools in Browser</a></p>
  <p><strong>Root-Component:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div lass=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row justify-content-center mt-4&quot;&gt;
        &lt;div class=&quot;col-10 col-sm-10 col-lg-6&quot;&gt;
          &lt;!--Anfang: InputEintrag--&gt;
          &lt;inputAufgabe&gt;&lt;/inputAufgabe&gt;
          &lt;!--Ende:InputEintrag--&gt;
  
          &lt;!-- Anfang: Todo Board--&gt;
          &lt;aufgabenBoard :todos=&quot;todos&quot;  &gt;&lt;/aufgabenBoard&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import inputAufgabe from &quot;./components/inputAufgabe.vue&quot;;
  import aufgabenBoard from &quot;./components/aufgabenBoard.vue&quot;;
  
  
  export default {
    name: &quot;App&quot;,
    components: {
      inputAufgabe,
      aufgabenBoard,
    },
  
    data (){
      return {
         todos: [
           {id: 1, aufgabe:&quot;Vue JS Lernen &quot;, priority: -1,},
           {id: 2, aufgabe:&quot;Hausaufgaben machen&quot;, priority: 0,},
           {id: 3, aufgabe:&quot;Müll rausbringen&quot;, priority: 1, },
           
           
           ],  
      }
  
  
    }
  
    
  
  
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  @import &quot;~bootstrap/dist/css/bootstrap.min.css&quot;;
  @import &quot;~@fortawesome/fontawesome-free/css/all.min.css&quot;;
  &lt;/style&gt;
  </code></pre>
  <p><strong>Child 1 of Root-Comonent (TaskBoard/ AufgabenBoard):</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;card mt-5&quot;&gt;
      &lt;div class=&quot;card-header&quot;&gt;
        &lt;h2 class=&quot;text-center&quot;&gt;TODO-Liste&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card-body mt-3 mb-3&quot;&gt;
        &lt;!-- Anfang von Task--&gt;
        
        &lt;aufgabeTask  v-for=&quot;todo in todos&quot; :key=&quot;todo.id&quot; :todo=&quot;todo&quot;/&gt;
        
        &lt;!--Ende: von der Task--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import aufgabeTask from &quot;./aufgabeTask.vue&quot;;
  export default {
    name: &quot;aufgabenBoard&quot;,
    components: {
      aufgabeTask,
      
    },
  
    
  
    props:{
        todo: Array,
        
  
        }
  
  
  
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>Child of Child 1 (Task/TaskBoard)</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;task alert alert-primary &quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-9&quot; &gt;Content&lt;/div&gt;
        &lt;div class=&quot;col-3 float-end&quot;&gt;
          &lt;i class=&quot;fas fa-edit me-2&quot; role=&quot;button&quot; @click=&quot;editEvent&quot;&gt;&lt;/i&gt;
          &lt;i class=&quot;far fa-trash-alt&quot; role=&quot;button&quot; @click=&quot;deleteEvent()&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: &quot;aufgabeTask&quot;,
   
   props: {
     todo: Object,
   }
  
  
    
  };
  
  
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  <p>Please help i am trying to fix it over 4 hours now</p>