how to implement two seperated components with Scrollspy in

Expected behavior I would like to implement Scrollspy seperating with two components such as navbar mdbScrollSpy="scrollspy1" and actual section component with mdbScrollSpyElement Actual behavior

Resources (screenshots, code snippets etc.)

1) header component ->

<!-- Navbar brand -->
<mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

<!-- Collapsible content -->
<links>

    <!-- Links -->
    <ul mdbScrollSpy="scrollspy1" class="navbar-nav mr-auto">
        <li class="nav-item">
            <a mdbScrollSpyLink="home" class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a mdbScrollSpyLink="features" class="nav-link waves-light" mdbWavesEffect>Features</a>
        </li>
        <li class="nav-item">
            <a mdbScrollSpyLink="pricing" class="nav-link waves-light" mdbWavesEffect>Pricing</a>
        </li>
    </ul>
    <!-- Links -->

</links>
<!-- Collapsible content -->

Actual section component --->

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia? Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore? Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut! Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro! Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora! Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias! Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores. Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam! Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!