title: How to stop auto scroll to top in Vue.js
body: <p>I have a component structure as bellow: </p>
  
  <pre><code>&lt;Search&gt;
   &lt;SearchField&gt;
     &lt;Image&gt;
     &lt;Summary&gt;
     &lt;Suggestion&gt;
   &lt;/SearchField&gt;
  &lt;/Search&gt;
  &lt;Product&gt;              &lt;---- this changes depending on UI selection
     &lt;Result&gt;
        &lt;Option&gt;
          &lt;Filter&gt;       &lt;----Here button click auto scrolls up 
  ...
  </code></pre>
  
  <p>The issue is When a <code>button</code> on <code>&lt;Filter&gt;</code> component clicked then a <code>modal</code> opens but underneath everything scrolls up automatically. I need to stop that behaviour. No idea how. </p>
  
  <p>Since there are too many components, not sure where exactly need to set that up and how? </p>
  
  <p>I was thinking of applying the clause to the top level component ´`. Would it be correct? </p>
  
  <p><strong>Required</strong> to stop auto scroll up when on mobile. </p>