title: Vue.js recursive component's data including props
body: <p>I'm using recursive components in vue.js. Every component has an array where one value is passed from the parent component as a prop. How do I have to create the array to properly include the value/prop?</p>
  <p>Here are the details with simplified (untested) code to show the theoretical problem (I know that this example causes infinite recursion :-):</p>
  <p>My-component.vue</p>
  <pre><code>&lt;template&gt;
    {{my_array}}
    &lt;my-component :my_counter=&quot;my_array.counter&quot;&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
    props: ['my_counter'],
    name: 'my-component', 
    data: function () {
      return {
        new_counter: this.my_counter+1,
        my_array: [name: &quot;static name&quot;, counter: this.new_counter]
      }
    },
   }
  &lt;/script&gt;
  </code></pre>
  <p>Though new_counter is properly passed as my_counter prop to the child component, the my_array.counter is not properly updated with the new value.</p>
  <p>When I pass new_counter as my_counter property directly (without using the array). It works.</p>
  <p>I guess I need to use some kind of reactive data. However, I couldn't find a solution with computed properties, methods etc... How can I make my_array updated by the the passed prop?</p>
  <p>What is your recommendation to solve this problem?</p>