Bootstrap-vue модальный с fullscreen-vue

Question

Я использую:

bootstrap-vue

fullscreen-vue

И яиметь простой проект codesandbox .

В проекте много разных модалов.Чтобы не создавать ненужных методов (открыть, закрыть, ...) из-за количества всплывающих окон с различной логикой, я использую this.$bvModal.msgBoxConfirm с then.

Шаблон:

<template>
  <div id="app">
    <fullscreen ref="fullscreen" @change="fullscreenChange" class="h-100">
      <router-view/>
    </fullscreen>

    <div class="fullscreen-toggle">
      <a href="#" @click="toggleFullscreen" class="btn btn-warning">
        <span v-if="!fullscreen" class="fullscreen-btn">+</span>
        <span v-if="fullscreen" class="fullscreen-btn">-</span>
      </a>
    </div>
  </div>
</template>

Сценарий:

<script>
export default {
  name: "App",
  data () {
    return {
      fullscreen: false,
    }
  },
  methods: {
    toggle () {
      this.$refs['fullscreen'].toggle()
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    },
    toggleFullscreen () {
      this.$store.commit('toggleFullscreen');
    },
  },
  created () {
    //console.log('App created')
    this.$store.watch(
      (state) => {
        return this.$store.state.fullscreen // could also put a Getter here
      },
      (newValue, oldValue)=>{
        this.$refs['fullscreen'].toggle()
        //something changed do something
        console.log(oldValue)
        console.log(newValue)
      },
      //Optional Deep if you need it
      {
        deep:true
      }
    )
  }
};
</script>

И я хочу показать "+" , если fullscreen: false, "-" , если fullscreen: true, ноничего не работает.

Вопрос: Как использовать fullscreen-vue с несколькими модальностями bootstrap-vue?