Bootstrap-Vue scrollspy not working

Question

Is anyone familiar with Bootstrap-Vue scrollspy? I have this component and tried to imitate this fiddle: https://jsfiddle.net/u96u7uta/. Right now, the scrollspy isn't working and instead goes to each separate component by itself, rather than scrolling to the location on the page. Can anyone spot what I am doing incorrectly here? Thanks!

<template>
  <div>
    <b-navbar v-b-scrollspy fixed="top" toggleable type="inverse" variant="inverse" sticky>

      <b-nav-toggle target="nav_collapse"></b-nav-toggle>

      <b-link class="navbar-brand" to="#">
        <!-- <img id="brand" src="./assets/logo2.svg" alt="brand"> -->
      </b-link>

      <b-collapse is-nav id="nav_collapse">
        <b-nav is-nav-bar>
          <b-nav-item id="name"><router-link :to="{ name: 'Home', params: {} }">LN</router-link></b-nav-item>
        </b-nav>
        <b-nav is-nav-bar class="ml-auto">
          <b-nav-item-dropdown text="Take me to..." right>
            <b-dropdown-item href="#about">About</b-dropdown-item>
            <b-dropdown-item href="#projects">Projects</b-dropdown-item>
            <b-dropdown-item href="#experience">Experience & Education</b-dropdown-item>
            <b-dropdown-item href="#contact">Contact</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-nav>
          <!-- <b-nav-item class="link" href="#about">About</b-nav-item>
          <b-nav-item class="link" href="#projects">Projects</b-nav-item>
          <b-nav-item class="link" href="#exp_ed">Experience & Education</b-nav-item>
          <b-nav-item class="link" href="#contact">Contact</b-nav-item> -->

      </b-collapse>
    </b-navbar>
    <div id="scrollspy-content">
      <div id="home-jumbo">
        <h1>LN</h1>
        <h4>Software Engineer</h4>
      </div>
      <About id="about"></About>
      <Projects id="projects"></Projects>
      <Experience id="experience"></Experience>
      <Contact id="contact"></Contact>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import About from './About.vue'
import Projects from './Projects.vue'
import Experience from './Experience.vue'
import Contact from './Contact.vue'

export default {
  data () {
    return {
    }
  },
  components: {
    'About': About,
    'Projects': Projects,
    'Experience': Experience,
    'Contact': Contact,
  },
  methods: {
    onActivate(target) {
      console.log('Receved Event: scrollspy::activate for target ', target);
    }
  },
  created() {
    this.$root.$on('scrollspy::activate', this.onActivate);
  }
}
</script>