Vue使用css属性 scroll-behavior无效

Question

给文章添加了个目录(Toc)，我想点击后跳到某个位置，让他有个平滑的滚动，因此在 Article 组件使用css 的 scroll-behavior: smooth 属性，但加上去后还是那个样子，我又在 app 组件添加，还是没用

然后试了下 * { scroll-behavior: smooth; }， 这下可以了，经过调试，发现 .app-main 这个组件里添加这个属性是影响是否能平滑滚动，因此我在这个类添加这个属性，然而还是不行。。。迷茫。。。

App 组件代码如下:

<template>
  <div id="app" class="app">
        <nav-bar />
        <main class="app-main">
            <transition :name="transitionName">
                <keep-alive include="Home">
                    <router-view />
                </keep-alive>
            </transition>
        </main>
        <floating-button />
  </div>
</template>

<script>
    
    import NavBar from 'components/NavBar/NavBar'
    import FloatingButton from 'components/FloatingButton/FloatingButton'
    
    export default {
        name: "App",
        components: {
            NavBar,
            FloatingButton
        },
        data() {
            return {
                transitionName: ''
            }
        },
        watch: {
            $route(to, from) {
                if (from.meta.index < to.meta.index)
                    this.transitionName = 'slide-left'
                else
                    this.transitionName = 'slide-right'
            }
        }
    }
    
</script>

<style lang="stylus">
    
    @import('~assets/stylus/base.styl')
    
    .app
        width 100%
        height auto
        background-color #00030B
        scroll-behavior smooth
        
        .app-main
            scroll-behavior smooth
        
    .slide-right-leave-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-left-enter-active
        will-change transform
        transition all .4s
        position absolute
        left 0
        
    .slide-left-enter
        transform translateX(100%)
        
    .slide-left-leave-to
        transform translateX(-100%)
        
    .slide-right-enter
        transform translateX(-100%)
        
    .slide-right-leave-to
        transform translateX(100%)

</style>

Article 组件代码

<template>
    <div class="article">
        <div class="article-wrap" v-if="isComplete">
            <article-cover :info="info" class="article-cover" />
            <div class="article-container">
                <div id="article" class="article-content"
                    v-html="articleContent"
                    v-highlight
                    ref="content">
                </div>
                <div class="article-sidebar">
                    <side-bar></side-bar>
                    <toc ref="toc" @anchor="anchor"></toc>
                </div>
            </div>
        </div>
    </div>
</template>

// 省略了 js 

<style lang="stylus" scoped>
    
    .article
        position absolutes
        width 100%
        background-color #fff
        scroll-behavior smooth
        
        .article-cover
            width 100%
            height 42rem
            
        .article-wrap
            width 100%
            height 100%
            background-color #fff
        
            .article-container
                width 120rem
                height 100%
                margin 0 auto
                padding 4rem 0
                display grid
                grid-template-columns minmax(0, 1fr) 30rem
                grid-gap 4rem

</style>