How to hide buttons on vue.js main page?

Question

Vue.js

Help to hide the button-group on the main page. Because I use fullpage, I do not quite understand how to solve the problem correctly. I think like this: if there was a click @click="moveTo(0)", I forward the event to the parent template and hide it, but what about scrolling?
index.vue

<template>
    <div class="fullpage-container">
        <div class="page-home">
            <div class="button-group"> // пытаюсь скрыть
                <b-button-group vertical>
                   <b-button type="button" v-bind:class="[{active:index == 0}]" @click="moveTo(0)">
                </b-button>
                <b-button type="button" id="md-trigger" :class="{active:index == 1}" @click="moveTo(1)">
                </b-button>
                    </b-button>
                </b-button-group>
            </div>
            <div class="fullpage-wp" v-fullpage="opts" ref="example">
                ...
                <div class="page">
                    <logo></logo> // главная
                </div>
                <div class="page">
                    <pricelist></pricelist>
                </div>
                ...
            </div>
        </div>
    </div>
</template>
<script>
import Logo from '~/components/Logo.vue'
import pricelist from '~/components/Pricelist.vue'

export default {
  data () {
    var that = this
    return {
      index: 0,
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
             that.index = next
        },
        afterChange: function (prev, next) {
        }
      }
    }
  },
  methods: {
    moveTo (index) {
      this.$refs.fullpage.$fullpage.moveTo(index, true)
    }
  },
  components: {
    Logo,
    pricelist,
    ...
  }
}
</script>