Highlight doesn't work correctly

[xtuer]

Test code:

<template lang="html">
    <div class="main">
        <ul v-scroll-spy-active v-scroll-spy-link="{ selector: 'li.menu-link' }" class="menu">
            <li class="menu-link">
                <a>Menu 1</a>
            </li>
            <li class="menu-link">
                <a>Menu 2</a>
            </li>
            <li class="menu-link">
                <a>Menu 3</a>
            </li>
        </ul>

        <!-- Error even set up offset to 400 -->
        <div v-scroll-spy="{ sectionSelector: '.chapter', offset: 400 }" class="container" style="margin-top: 400px; border: 1px solid gray;">
            <div class="chapter">
                <h1>Header 1</h1>
                <p>Content 1</p>
            </div>

            <div>xxxx</div>

            <div class="chapter">
                <h1>Header 2</h1>
                <p>Content 2</p>
            </div>

            <div>yyyy</div>

            <div class="chapter">
                <h1>Header 3</h1>
                <p>Content 3</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.main {
    display: flex;

    .menu {
        width: 200px;
        padding: 5px;

        .menu-link {
            padding: 5px;
            border-left: 2px solid transparent;

            &.active {
                background: #f3f3f3;
                border-left-color: #178ce6;
                transition-duration: .5s;

                a {
                    color: #178ce6;
                }
            }

            a {
                color: #333;
            }
        }
    }

    .container {
        position: relative;
        flex: 1;
        overflow: auto;
        height: 200px;

        p {
            height: 200px;
        }
    }
}
</style>