Scroll automatically on specific div

I have a really long menu (for docs) and I want to scroll the menu if the active menu item is not in view.

This is my code

<template>
    <div
        class="flex divide-x divide-gray-100 min-h-screen overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-0">
        <aside class="h-screen w-72 fixed top-0 left-0 bg-gray-0 flex flex-col">
            <inertia-link href="/docs" class="p-4">
                <p class="text-lg font-semibold">SAM</p>
            </inertia-link>
            <div ref="menu-scroll-container"
                 class="flex flex-col max-h-full pb-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-0">
                <div v-for="item in menu_items" :key="item.name" :ref="item.ref" class="flex flex-col px-4 py-2">
                    <div class="flex items-center gap-4 py-2 fill-gray-500">
                        <box-icon v-if="item.icon === 'box'" class="h-4 w-4"/>
                        <document-icon v-if="item.icon === 'doc'" class="h-4 w-4"/>
                        <document-wave-icon v-if="item.icon === 'doc-wave'" class="h-4 w-4"/>
                        <document-writing-icon v-if="item.icon === 'doc-writing'" class="h-4 w-4"/>
                        <home-icon v-if="item.icon === 'home'" class="h-4 w-4"/>
                        <location-icon v-if="item.icon === 'store'" class="h-4 w-4"/>
                        <truck-icon v-if="item.icon === 'truck'" class="h-4 w-4"/>
                        <location-icon v-if="item.icon === 'location'" class="h-4 w-4"/>

                        <p class="text-gray-600">{{ item.name }}</p>
                    </div>

                    <div class="flex flex-col gap-3 border-l-2 border-gray-50 text-sm text-gray-500">
                        <inertia-link v-for="(i, index) in item.items" :href="i.route" :key="index"
                                      class="pl-4 hover:bg-gray-00 cursor-pointer"
                                      :class="{'text-dark-blue font-semibold bg-gray-00': matchUrl(i.route)}"><p>
                            {{ i.name }}</p>
                        </inertia-link>
                    </div>
                </div>
            </div>
        </aside>
        <main class="w-full min-h-screen bg-white pl-72">
            <div class="p-6">
                <slot></slot>
            </div>
        </main>
    </div>
</template>
<script>
import HomeIcon from "@/shared/Icons/Menu/HomeIcon";
import LocationIcon from "@/shared/Icons/Menu/LocationIcon";
import DocumentIcon from "@/shared/Icons/Menu/DocumentIcon";
import BoxIcon from "@/shared/Icons/Menu/BoxIcon";
import TruckIcon from "@/shared/Icons/Menu/TruckIcon";
import DocumentWaveIcon from "@/shared/Icons/Menu/DocumentWaveIcon";
import DOCS_MODULES from "@/Pages/Docs/docs-modules";

export default {
    name: 'docs-layout',
    components: {
        DocumentWaveIcon,
        TruckIcon,
        BoxIcon,
        DocumentIcon,
        LocationIcon,
        HomeIcon
    },
    methods: {
        matchUrl(item) {
            return this.$page.url === item
        },
    },
    computed: {
        menu_items() {
            return DOCS_MODULES;
        },
    },
    mounted() {
        if (this.$page.url.startsWith('/docs/dashboard')) {
			this.$refs.dashboard.scrollIntoView({behavior: 'smooth'});
		}

        if (this.$page.url.startsWith('/docs/gps')) {
			this.$refs.gps.scrollIntoView({behavior: 'smooth'});
        }

        if (this.$page.url.startsWith('/docs/surveys'))
			this.$refs.surveys.scrollIntoView({behavior: 'smooth'});
        }

        if (this.$page.url.startsWith('/docs/reports')) 
			this.$refs.reports.scrollIntoView({behavior: 'smooth'});
        }

        if (this.$page.url.startsWith('/docs/products')) 
			this.$refs.products.scrollIntoView({behavior: 'smooth'});
        }

        if (this.$page.url.startsWith('/docs/distribution')) 
			this.$refs.distribution.scrollIntoView({behavior: 'smooth'});
        }

        if (this.$page.url.startsWith('/docs/dynamics'))
 			this.$refs.dynamics.scrollIntoView({behavior: 'smooth'});
        }
    }
}
</script>

I'm trying to scroll ref menu-scroll-container

I tried that above but nothing scrolls, what am I doing wrong?