title: Why doesn't scrollIntoView work in Vue 3 even though I'm able to get a reference to the element that I'm trying to scroll to
body: <p>I have a Vue 3 component that I'm trying to setup as my navigation for a single page app. When the user clicks on an item I'd like for the page to scroll to the element that contains the content for that section.</p>
  <p>The strange thing is that I'm able to get a reference to the div using <code>document.querySelector</code>. I'm able to log the div to the consol however when I try to call scrollIntoView on the div it doesn't do anything unless I wrap the <code>element.scrollIntoView</code> in a <code>setTimeout</code> function.</p>
  <p>I'm sure this has something to do with the Vue component life cycle. I've tried wrapping my code in the <code>onMounted</code> function and that only makes my <code>scrollPageTo</code> function fall out of scope.</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;navigation-view&quot; class=&quot;navigation-bar bg-gradient-to-tr w-full mx-auto flex items-start py-4&quot;&gt;
          &lt;div class=&quot;w-full mx-auto text-right&quot;&gt;
                  &lt;nav&gt;
                      &lt;a class=&quot;top-nav-item&quot; href=&quot;#&quot; v-on:click=&quot;scrollPageTo('home-view')&quot;&gt;
                          &lt;i class=&quot;fa fa-home fa-lg&quot;&gt;&lt;/i&gt; Home
                      &lt;/a&gt;
  
                      &lt;a class=&quot;top-nav-item&quot; href=&quot;#&quot; v-on:click=&quot;scrollPageTo('hello-view')&quot;&gt;
                          &lt;i class=&quot;fa fa-hands-helping fa-lg&quot;&gt;&lt;/i&gt; Hello
                      &lt;/a&gt;
  
                      &lt;a class=&quot;top-nav-item&quot; href=&quot;#&quot; v-on:click=&quot;scrollPageTo('contact-view')&quot;&gt;
                          &lt;i class=&quot;fa fa-envelope fa-lg&quot;&gt;&lt;/i&gt; Contact
                      &lt;/a&gt;
                  &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;logo&quot;&gt;
          &lt;img src=&quot;/assets/img/615io-logo-wbg.png&quot; alt=&quot;615io logo&quot;&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script lang=&quot;ts&quot;&gt;
  import {defineComponent, onMounted} from &quot;vue&quot;;
  export default defineComponent({
      setup() {
  
          const scrollPageTo = (navEl) =&gt; {
              console.log(`#${navEl}`);
              let element = document.querySelector(`#${navEl}`);
              console.log(element);
              element.scrollIntoView({behavior: 'smooth'});
          }
  
          return {
              scrollPageTo,
          }
  
  
      }
  });
  &lt;/script&gt;
  </code></pre>