Vue.js：＆＃34; $ scrollTo＆＃34;未在内部模板中定义

Question

当我在主模板Index.vue中使用另一个模板（Header.vue）时，它会抛出一个错误＆＃34; $ scrollTo＆＃34;没有定义。

注意：$ scrollTo由模块提供＆＃34; vue2-scrollspy＆＃34;我已安装。

但是，如果我在Index.vue中粘贴Header.vue的整个代码，它可以正常工作。

Index.vue

 <template>
      <div class="scroll-div">
        <mainheader></mainheader>
      </div>
    </template>
    <script>
        import mainheader from './Header.vue'
        export default {
            name: 'MyApplication',
            components:{
                mainheader
            }
         }
    </script>

Header.vue

<template>
  <div class="main-Header">
    <b-navbar toggleable="md" type="dark" variant="dark" fixed="top">
      <div class="container">
        <b-navbar-brand @click="$scrollTo(0)"></b-navbar-brand>
</div>
    </b-navbar>
  </div>
</template>
<script>
    export default {
        name : 'mainheader',
        data () {
          return {
            msg: 'Welcome to SportsBee',
            scrollPos: 0
          }
        }

    }
</script>

index.js

import Scrollspy from 'vue2-scrollspy';

Vue.use(Scrollspy);
Vue.use(VueAxios, axios);
Vue.use(VueRouter)

const router =  new VueRouter({
  routes: [
    {
        path: '/',
        name: 'index',
        component: index
    }
  ], mode:"history"
})
export default router;

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})