title: Vue.js Recursive component scrollIntoView
body: <p>I have a page in a Vue 3 app which has a scrollable div. The div's content is a recursive component in which there are nodes which might have the node.OptionId field or may not. I would like to have some buttons each for the corresponding OptionIds and whenever I click on the buttons the scrollable div would scroll to the section of the recursive component with the corresponding OptionId.</p>
  <p>So for example I have OptionId 001 and if I click the 001 button the div would scroll to the node with the OptionId 001.</p>
  <p>However I have no idea how I should implement this behaviour. I tried to apply ref to the nodes but with recursive component only the last node would get the ref attribute and not all the nodes.</p>
  <p>the main page:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;Message
      ref=&quot;Message&quot;
    /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>the Message component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div v-for=&quot;(node, i) in message.Content&quot; :key=&quot;i&quot;&gt;
    &lt;MessageContent :node=&quot;node&quot; ref=&quot;MessageContent&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and the recursive MessageContent component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;th
            class=&quot;label block-title&quot;
            v-if=&quot;node.Block&quot;
            :ref=&quot;
              node.OptionId !== undefined ? 'OptionId-' + node.OptionId : ''
            &quot;
          &gt;
            {{ node.Name }}
          &lt;/th&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
               ...
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;div v-if=&quot;node.Items &amp;&amp; node.Items.length&quot;&gt;
        &lt;MessageContent 
          v-for=&quot;(child, i) in node.Items&quot;
          :node=&quot;child&quot;
          :key=&quot;i&quot;
        &gt;
        &lt;/MessageContent &gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This way</p>
  <pre class="lang-js prettyprint-override"><code>this.$refs.Message.$refs.MessageContent.$refs
  </code></pre>
  <p>would only come up with the last node's ref which will be 'OptionId-undefined'.</p>
  <p>Is there a way in which I could somehow create a custom attribute for the divs with the not undefined OptionIds which I could grab from the main page and use for the scrollIntoView?</p>