How can I use scrollspy in Vue parent-child relationship and where data is provided from a json object in Vue js

I have a main component AppMainComponent.vue, its children are TextComponent.vue, HeaderComponent.vue and ImageComponent.vue. I am getting the data from a JSON object into my main component and it looks something like this:

AppMainContent.vue

<template>
<div>
        <div v-for="item in items">            <-- This is what I get from my JSON object
          <ImageComponent v-if="item.component === 'image'">{{item.settings.image}}</ImageComponent>
          <HeaderComponent v-if="item.component === 'heading'">{{item.settings.text}}</HeaderComponent>
          <TextComponent v-if="item.component === 'text'" v-html="item.settings.text">{{item.settings.text}}</TextComponent>
        </div>

      <div class="sidebar_content" v-sticky>   <-- This is my sidebar where I click on the heading links and the browser scrolls to the respective heading section.
        <h5>Side Bar</h5>
      <ol id="side_bar_list">
          <b-list-group v-b-scrollspy>
            <li>
              <b-list-group-itemhref="#one">Heading 1</b-list-group-item>
            </li>
            <li>
              <b-list-group-item href="#two">Heading 2</b-list-group-item>
            </li>
            <li>
              <b-list-group-item href="#three">Heading 3</b-list-group-item>
            </li>
          </b-list-group>
        </ol>
      </div>

</div>

</template>

<script>
import ImageComponent from './ImageComponent'
import TextComponent from './TextComponent'
import HeaderComponent from './HeaderComponent'
import example from '../assets/example.json';


export default {
    name: "AppMainContent",
    components:{
      ImageComponent,
      TextComponent, 
      HeaderComponent
    },
    data () {
    return {
      items: example.data.guides[0].mainContent,
    }
  }
}
</script>

The output of my json object is something like this:

Heading 1<-- #one

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Heading 2 . <-- #two

[Image here]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Heading 3<-- #three

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

I want to scrollspy on these heading objects from my sidebar, how can I achieve this?