Vuetify expansion panel scroll to header - css

Question

So I'm trying to use expansion panels in a project and I wanted to have my panels to always focus or scroll to the header or first element inside a newly opened panel. Everytime I open a new panel, it ignores any kind of focus or scrolling and just sticks to the scroll position it was due to overflow of parent container. Here's my vue without most of its state to show the divs and containers:
<template>
<div>
<Synchronizing v-show="loading" />
<div v-show="!loading" class="main">
<Navbar />
<div class="header">
<div class="logo">
<img style="width: 40px" src="" />
</div>
</div>
<div class="description">
<h1>HEADER</h1>
<h2>TEXT</h2>
</div>
<div class="main-container">
<div ref="main-container" class="to-harvest-container">
<v-expansion-panels
:mandatory="true"
:value="expanded"
:accordion="true"
:tile="false"
>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"><LABEL></LABEL></label>
<v-container class="chart-container">
<v-row>
<v-col class="column"
><div v-if="!alerts.to" class="chart">
<doughnut-chart
></doughnut-chart>
</div>
<div v-else>
<div ><h2>TEXT</h2></div>
<div >
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat non perferendis reprehenderit quam, inventore delectus minima quis ratione dolores mollitia sunt iure, praesentium animi, necessitatibus quos aliquid modi dignissimos. Aut?
</p>
</div>
</div></v-col
></v-row
>
</v-container>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of data -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet vel commodi harum obcaecati voluptatum ea, repudiandae totam in numquam, illum possimus dignissimos, eum laborum quia nesciunt voluptates soluta esse amet.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label"
>LABEL</label
>
<v-container class="chart-container">
<v-row v-if="!alerts.lastYear">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table
>
<!-- lots of DATA -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div>
<div ><h2>TEXT</h2></div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima cumque quidem dignissimos temporibus aperiam consectetur debitis voluptate ratione inventore consequuntur reprehenderit, maxime, optio, tempore rerum ab vel at atque! Ipsum!
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel class="panel">
<v-expansion-panel-header #click="logger" class="panel-header"
>TEXT</v-expansion-panel-header
>
<v-expansion-panel-content>
<label class="panel-label">LABEL</label>
<v-container class="chart-container">
<v-row>
<v-col class="column" lg="12">
<div>
<div>
<div>
<h3>CONTENT</h3>
<img src="#/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
<div class="income-card">
<div class="card-top">
<h4>TEXT</h4>
<img src="#/assets/images/money-image.svg" alt="" />
</div>
<div class="card-bottom">
<h3>0</h3>
</div>
</div>
</div>
</v-col>
</v-row>
<v-row v-if="boolean">
<v-col class="column" cols="12">
<div class="chart">
<doughnut-chart
></doughnut-chart>
</div>
</v-col>
<v-col class="column" cols="12">
<div class="table-container">
<v-data-table>
<!-- LOTS OF DATA HERE -->
</v-data-table>
</div>
</v-col>
</v-row>
<v-row v-else>
<div class="alert-card">
<div class="alert-card-top"><h2>TEXT</h2></div>
<div class="alert-card-bottom">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ipsa obcaecati assumenda facilis expedita sunt
id debitis voluptatum in. Quibusdam eveniet asperiores
vitae quisquam perferendis laboriosam cupiditate nisi
repellendus non unde.
</p>
</div>
</div>
</v-row>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Report",
data() {},
methods: {
logger() {
console.log(this.$refs["main-container"]);
setTimeout(() => {
this.$vuetify.goTo(999);
}, 400);
},
},
};
</script>
<style src="./style.scss" lang="scss" scoped />
I'm trying to use the $vuetify.goTo API method but it simply hasn't done anything. Any ideas on how to make it so whenever I open a new panel, it scrolls back to the beginning of that panel?
Thanks a lot!!