title: Vue js. Recursive component ruins my life
body: <p>I wanted to create a tree view from an XML file, and I did this. However, when I decided to make it more flexible I encountered some problems.</p>
  
  <p>Here are my components:</p>
  
  <pre><code>Vue.component('elname', {
    props: ['text'],
    template: '&lt;span&gt;{{ text }}&lt;/span&gt;'
  })
  
  
  Vue.component('recursive', {
    props: ['d', 'liname', 'openclose'],
    template: '#recursive',
    data: function() {
      return {
        seen: true
      }
    }
    }
  )
  </code></pre>
  
  <p>and the Vue object looks like this:</p>
  
  <pre><code>var appp = new Vue({
    el: '#here',
    data: function(){
      return {
        friends: '',
      }
    },
    beforeMount() {
      parser = new DOMParser();
      var response = "&lt;scope&gt;&lt;friend&gt;&lt;name&gt;Alex&lt;/name&gt;&lt;hobbies&gt;&lt;h&gt;music&lt;/h&gt;&lt;h&gt;salsa&lt;/h&gt;&lt;/hobbies&gt;&lt;/friend&gt;&lt;friend&gt;&lt;name&gt;Natasha&lt;/name&gt;&lt;hobbies&gt;&lt;h&gt;hiking&lt;/h&gt;&lt;/hobbies&gt;&lt;/friend&gt;&lt;/scope&gt;";
      xml = parser.parseFromString(response, 'text/xml');
      children = xml.getElementsByTagName('scope')[0];
      this.friends = children;
    }
  })
  </code></pre>
  
  <p>I have this variable <code>seen</code> in <code>recursive</code> component</p>
  
  <pre><code>Vue.component('recursive', {
    props: ['d', 'liname', 'openclose'],
    template: '#recursive',
    data: function() {
      return {
        seen: true // &lt;-- here it is
      }
    }
    }
  )
  </code></pre>
  
  <p>It must change its value <code>@click</code> event to hide a nested list (please, see the <a href="https://jsfiddle.net/jajabya/La2e2aot/1/" rel="noreferrer">JSfiddle</a>), but when it changes it updates its value IN SEVERAL components.</p>
  
  <p>How to make its value be updated only in a particular component?</p>
  
  <p>Here is a template:</p>
  
  <pre><code>&lt;div id="here"&gt;
    &lt;recursive :d="friends" openclose="[-]"&gt;&lt;/recursive&gt;
  &lt;/div&gt;
  
  &lt;template id="recursive"&gt;
    &lt;div&gt;
      &lt;ul v-if="d.children.length != 0"&gt;
        &lt;li v-for="n in d.childNodes" @click="seen = !seen"&gt;
          &lt;elname :text="n.tagName"&gt;&lt;/elname&gt;
          {{ openclose }}
          {{seen}} &lt;!-- it is just for testing purposes to illustrate how seen var changes --&gt;
          &lt;recursive :d="n" openclose="[-]"&gt;&lt;/recursive&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul v-else&gt;
        &lt;elname :text="d.textContent"&gt;&lt;/elname&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>