Сергей delphinpro

Зачем смешивать две экосистемы?
Поищите слайдер на vue. Или хотя бы ванильный.

По вопросу:

в mounted вешайте слушателя matchMedia на нужный диапазон и в нем инициализируйте/деактивируйте слик.

кроме того можно использовать встроенную функциональность. Обратите внимание на этот пример — в диапазоне 0..300 слайдер выключается.

VueJS: где лучше хранить css, в компонентах .vue или main.css?

Там нечего забывать.
overflow:hidden и пара событий для мышки и сенсоров: onwheel, touchmove

Причем, можно детектить вебкиты, и для них ничего не делать скриптами, а скрыть полоску стилями. Скролл будет работать.

Сделать экшн, в котором выполнить запрос.

actions.loadMenu     = async ({ commit, state }, payload) => {
    if (!state.menus[payload.menu] || payload.force) {
        let response = await Vue.axios.get('/menu/' + payload.menu);
        if (response.status === 200) {
            commit('setMenu', { menu: payload.menu, data: response.data });
        }
    }
};

UPDATE:

store.js

import axios from 'axios';
export default new vuex.Store({
    state: {
        params: null,
    },
    mutations:{
        setParams(state, payload){
            state.params = payload;
        }
    },
    actions: {
        async getParams({comit, state}){
            let response = await axios.get('information/account');
            if (response.status === 200) {
                commit('setParams', response.data);
            }
        }
    }
});

IdWeb.vue

import { mapState } from 'vuex';
export default {
    name: 'IdWeb',
    computed: {
        ...mapState([
            'params'
        ])
    },
    mounted() {
        this.$store.dispath('getParams');
    },
}

<template>
    <li class="state_account_id" v-if="params">
        ID: {{params.id}}
    </li>
</template>

Использовать стрелочные функции

methods: {
    login() {
        this.$auth.login({
            params: {
                email: this.email,
                password: this.password
            },
            success: () => {
                // handle redirection
                const redirectTo = this.$auth.redirect()
                    ? this.$auth.redirect().from.name
                    : this.$auth.user().role === 2
                        ? 'admin.dashboard'
                        : 'dashboard'
                this.$router.push({name: redirectTo})
            },
            error: error => {
                this.has_error = true
                this.errors = error.response.data.errors || {}
                this.error = error.response.data.error
            },
            rememberMe: this.remember_me,
            fetchUser: true
        })
    },
    ........
}

Вы брикпойнты по ресайзу что ли пересчитываете? Это мрак.
Попробуйте использовать matchMedia
Такие брикопойнты отлично уживаются с реактивностью. Проверено.

На примере одного пойнта (в App.mounted()):

const mqDesktop = window.matchMedia('(min-width: 992px)');
const mqMobile  = window.matchMedia('(max-width: 991px)');
mqDesktop.addListener(e => { if (e.matches) this.setBreakpoint('desktop');});
mqMobile.addListener(e => { if (e.matches) this.setBreakpoint('mobile'); });
if (mqDesktop.matches) this.setBreakpoint('desktop');
if (mqMobile.matches) this.setBreakpoint('mobile');

Здесь this.setBreakpoint() — это мутация вьюкса.

props: ['color'], !!!

<Card :color="color"/>
<Card color="#f00"/>

computed:{
  classes(){
    return {
      pagination__btn_disabled: !this.prevPage,
      [`pagination__btn_theme_${this.theme}`]: !!this.theme,
    }
  }
}
<button
  class="pagination__btn"
  :class="classes"
  :disabled="!prevPage"
  type="button"
  title="Назад"
  @click="onPrevPage"
>
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>

Дофига лишний компонентов на первый взгляд..
Но фиг с ним. Пилите роутер-вью на месте меняемых компонентов:

<div id="app">
    <router-view></router-view>
</div>

<main class="main">
    <app-aside></app-aside>
    <router-view></router-view>
</main>

<section class="app__section">
    <section-header></section-header>
    <router-view></router-view>
</section>

Ну а дальше изучать https://router.vuejs.org/ru/guide/essentials/neste...

<slot name="one" v-if="$slots.one"></slot>
<div v-else>Контент по умолчанию</div>

Когда вы пишете на вью, вы должны ориентироваться на состояние данных. Грубо говоря, императивный подход здесь не совсем в тему.
Вы не должны писать "по клику присвоить класс"
Вместо этого вы должны делать так

data() {
  return {
    isShowHelloBlock: false,
  }
}
<div :class="{someClass : isShowHelloBlock}">Hello</div>
<button @click="isShowHelloBlock = true">toggle block</button>

Изменяя состояние, вы изменяете представление.

<TermsConfirm
  :by="`clicking '${name}'`"
>

<div v-for="(league, index) in leagues.countrys"
     v-if="league.strFanart1"
>
    <h3>{{ league.strLeague }}</h3>
    <h5>{{ league.strFanart1 }}</h5>
</div>

Второй вариант:

computed: {
    leagues() {
      return this.$store.state.leagues.filter(item => !!item.strFanart1);
    }
},