title: Scroll down when clicked with Vue.js
body: <p>What I want to do is that when the user clicks on an article, it scrolls down to a sibling section. Code looks something like this.</p>
  
  <pre><code>&lt;template&gt;
      &lt;article @click="handleCardClick" class="text-center mr-8 mb-12 cursor-pointer hover:opacity-50 w-1/5"&gt;
          &lt;picture class="flex justify-center items-center mb-4 w-full" style="height: 320px"&gt;
              &lt;img :src="source" :alt="imgAlt" class="shadow-md" style="" /&gt;
          &lt;/picture&gt;
          &lt;h4 class="font-bold mb-1"&gt;{{ title }}&lt;/h4&gt;
          &lt;h6 class="text-sm text-gray-600"&gt;{{ tags.length &gt; 0 ? tags[0].name : '' }}&lt;/h6&gt;
      &lt;/article&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import { mapActions, mapState } from 'vuex';
  
      export default {
          props: {
              title: {
                  type: String,
                  required: true,
              },
          },
          computed: {
              ...mapState({
                  previewIndex: state =&gt; state.templates.hasTemplate
              }),
          },
          methods: {
              ...mapActions({
                  setActiveTemplate: 'templates/setActive',
                  setPreview: 'templates/setPreview',
                  removePreview: 'templates/removePreview',
              }),
              handleCardClick () {
                  this.setActiveTemplate(this.template);
                  this.selectTemplate(this.pos);
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the other file looks like this</p>
  
  <pre><code>&lt;template&gt;
      &lt;section v-if="template" class="flex justify-between w-full pt-10 pl-10 pr-5 pb-12 relative border-b border-t border-black my-4" style="height: 75vh"&gt;
          &lt;article class="flex flex-col justify-between" style="width: 25%"&gt;
              &lt;button @click="changeSection('invite')" class="h-1/3 pb-4"&gt;
                  &lt;picture class="h-full w-full flex justify-center items-center bg-gray-100"&gt;
                      &lt;img :src="template.url || ''" class="bg-gray-200 shadow-lg" style="min-height: 20px; min-width: 20px; height:80%" alt="Preview de la invitacion"&gt;
                  &lt;/picture&gt;
              &lt;/button&gt;
          &lt;/article&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I'm a bit new to Vue, so maybe it's really simple and I just can't find how to do it :) Thanks in advance!</p>