Как сделать смену тему карты, оформления через vue js?

Question

[Иван Беловиков]

Всем доброго времени суток!
Я сейчас работаю над сменой темы с темной на светлую и наоборот.
Я пытался в app основным контейнерам задавать :theme="theme", но классы обновлялись и убирались такие важные триггер-классы, как action, и я тупа не мог закрыть(свернуть) панель.
Решил просто добавлять класс colors-{dark//light} та же фигня, удаляются некоторые классы.
Далее я попытался изменить хоть цвет гугл карт, он делает запрос только при загрузке тогда и загружает цвет, а как сделать смену после закрытия панели, попробывал обновлять компонент - ничего.

Вот сам код:

Map.vue

<template>
  <splash v-if="!isSocketConnected"></splash>
  <gmap-map
    v-else
    :center="center"
    :zoom="zoom"
    :options="options"
    style="height: 100%"
    @zoom_changed="zoomChange($event)"
    >
    <google-cluster v-if="isClustered">
        <google-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :id="m.id"
          :username="m.username"
          :clickable="m.isClickable"
          :draggable="false"
          :icon="m.icon"
          @click="clickMarker(m)">
          <gmap-info-window v-if="m.data.length > 0">{{ m.data }}</gmap-info-window>
        </google-marker>
    </google-cluster>
      <google-marker v-else
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :id="m.id"
        :username="m.username"
        :clickable="m.isClickable"
        :draggable="false"
        :icon="m.icon"
        @click="clickMarker(m)">
        <gmap-info-window v-if="m.data.length > 0">{{ m.data }}</gmap-info-window>
      </google-marker>
  </gmap-map>
</template>

<script>
 import { mapGetters } from 'vuex';
 import Splash from './Splash';
  // константы light и dark удалил отсюда, ибо >10к. символов(просто цветовые схемы для гугл мапс, их проверял, всё с ними хорошо)
  export default {
    data() {
      return {
        zoom: 5,
        center: {
          lat: 38,
          lng: 34
        },
        init: false,
        options: {
          disableDefaultUI: true,
          zoomControl: true,
          zoomControlOptions: {
              position: 8
          },
          streetViewControl: false,
          streetViewControlOptions: {
              position: 4
          },
          scrollwheel: true,
          styles: this.$store.state.theme == true ? dark : light
        },
      }
    },
    methods: {
      zoomChange(event) {
        this.zoom = event;
      },
      clickMarker(marker) {
        this.$store.dispatch('clickMarker', marker);
        this.$socket.emit('joinConversation', marker)
        try {
          this.$f7.views.main.router.load({url: `/conversation/${marker.id}`})
        } catch (e) {
          this.$f7.alert(marker.username, 'Tick')
        }
      },
      initMap(position) {
        this.$store.dispatch('init', true);

        let lat = this.locationBlur ? Number(position.coords.latitude.toFixed(2)) : position.coords.latitude;
        let lng = this.locationBlur ? Number(position.coords.longitude.toFixed(2)) : position.coords.longitude;

        let myLocation = { lat, lng, username: this.$store.state.user.username, id: this.$socket.id }

        if (!this.init) {
          console.log('Howdy, u\'re awesome. What a shiny day. Have a good day, be polite.');
          this.center = myLocation;
          this.zoom = 15;
          this.init = true;
          // TODO: @cagataycali do it this a function.
          fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
            .then(res => res.json())
            .then(res => {
              this.$store.dispatch('setTrends', res)
            })
            .catch(err => {
              console.log(`Request err ${JSON.stringify(err)}`)
            })
        } else {
          if (this.$store.state.trends.length === 0) {
            fetch(`https://trends.tick.chat/${lat.toFixed(0)}/${lng.toFixed(0)}`)
              .then(res => res.json())
              .then(res => {
                this.$store.dispatch('setTrends', res)
              })
              .catch(err => {
                console.log(`Request err ${JSON.stringify(err)}`)
              })
          }
          console.log('Wow, you\'re moving buddy.');
        }
        this.$store.dispatch('setLocation', myLocation);
        this.$socket.emit('myLocation', myLocation);
      },
    },
    mounted() {
      this.startComponent()
    },
    computed: {
      ...mapGetters([
       'isSocketConnected',
       'markers',
       'locationBlur'
     ]),
     isClustered() {
       return this.zoom < 20
     }
   },
  created() {
    let isMobile = window.isMobile();
    this.options.zoomControl = !isMobile;
    this.options.streetViewControl = !isMobile;
    if (navigator.geolocation) {
      navigator.geolocation.watchPosition(this.initMap,
      (error) => {
        if (error.code == error.PERMISSION_DENIED)
            this.$f7.alert('Tick require your location information. We promise about your location is blurred by default. You can share your exact location If you want. Please share your location and restart page.', 'Tick')
      }, {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      });
    } else {
      this.$f7.alert('Geolocation is not supported by this browser.', 'Tick')
    }
  },
  components: {
    Splash
  }
}
</script>

<style media="screen">
  .gm-style-iw {
    color: #353535
  }
@media screen and (max-width: 500px) {
  .gm-style-cc {
    display: none;
  }
  .gm-style-iw {
    color: #353535
  }
  img[src="https://maps.gstatic.com/mapfiles/api-3/images/google_white5_hdpi.png"]{display:none}
}
</style>

Inbox.vue(НАСТРОЙКИ)

<template>
  <f7-page name="inbox">
    <f7-navbar back-link="Back">
      <f7-nav-center sliding>Discover</f7-nav-center>
      <f7-nav-right>
        <f7-link icon="icon fa fa-podcast" style="font-size:1.5em" open-panel="right"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <br>
    <br>

    <f7-block-title style="text-align:center">Trends</f7-block-title>

    <f7-list media-list no-border>
      <f7-list-item v-for="trend in trends"
        :key="trend.id"
        class="inbox-list"
        :link="getConversationPath(trend.id, true)"
        :title="trend.name"
        media="<img src='/static/hashtag.png' style='width:60px'/>"
        :text="volumeText(trend.volume)"
      ></f7-list-item>
    </f7-list>

    <f7-block-title style="text-align:center">Conversations</f7-block-title>

    <f7-block id="noConversations" v-if="conversations.length === 0" style="text-align:center">
      <p><b>There's no conversation.</b></p>
      <p>Could you please share <b>{{host()}}</b> with one friend.</p>
    </f7-block>


    <f7-list media-list no-border>
      <f7-list-item v-for="conversation in conversations"
        :key="conversation.id"
        class="inbox-list"
        :link="getConversationPath(conversation.id, false)"
        :media="avatar(conversation)"
        :title="conversation.username"
        :text="conversation.text"
      >
      </f7-list-item>
    </f7-list>

  </f7-page>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
     'conversations',
     'trends'
   ])
  },
  methods: {
    getConversationPath(id, isGroup) {
      return `/${isGroup ? 'group' : 'conversation'}/${id}`;
    },
    avatar(conversation) {
      return `<img src='${conversation.messages[conversation.messages.length - 1].avatar}'>`;
    },
    volumeText(volume) {
      return `tweeted more than ${volume} time.`
    },
    isInboxEmpty() {
      return this.conversations.length === 0
    },
    host() {
      return window.location.host
    }
  }
}
</script>

<style media="screen">
  .inbox-list img {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  }

  .list-block .item-text {
    line-height: 41px;
    height: 36px;
  }

  .layout-dark .login-screen-content, .layout-dark .page, .layout-dark .panel, .page.layout-dark, .panel.layout-dark {
    background-color: #333333
  }

  .layout-dark .navbar, .layout-dark .subnavbar, .navbar.layout-dark, .subnavbar.layout-dark {
    background-color: #2e2e2e;
    color: #EEEEEE;
  }

  .layout-dark .content-block-inner {
    background: #353535
  }

  .list-block.media-list .item-link .item-title-row {
    background-image: none
  }
</style>

Будьте добры, спасите ламера :)