Станислав Лашманов

Попробуйте так.

import BaseGrid from './Grid.vue';
import MyMixin from './MyMixin.js';

const TransformedGrid = Vue.component('BaseGrid').extend({
  mixins: ['MyMixin']
});

export default {
  name: 'SomeComponent',
  components: {
    BaseGrid: TransformedGrid
  }
}

Если вам нужно сохранить глобальную установку то нужно слегка переписать скрипт установки.

installCustomGrid.js

import BaseGrid from './Grid.vue';
import MyMixin from './MyMixin.js';

const TransformedGrid = Vue.component('BaseGrid').extend({
  mixins: ['MyMixin']
});

export default {
  install (Vue) {
    Vue.component('Grid', TransformedGrid)
  }
}

app.js

import Grid from './installCustomGrid.js';

Vue.use(Grid);

Если это не даст нужного результата попробуйте просто перезаписать в вашем миксине все методы, которые используются в этом миксине: https://github.com/euvl/vue-js-grid/blob/master/sr...

methods: {
    getWindowSize () {}
  }

Сделайте обычный компонент вместо директивы, он больше сюда подходит по своей сути.

export default {
  name: 'EmojiImage',
  props: {
    emoji: 'String'
  },
  computed: {
    image() {
      return ''; \\ Здесь сформируйте url картинки, это так же позволит использовать кэш, загружать их асинхронно
    }
  }

}

<template>
  <span class="emoji-image">
    <img :src="image" :alt="emoji" />
  </span>
</template>

<EmojiImage :emoji="emoji" />

Используйте vue.production.min.js вместо vue.min.js. Это сборка без компилятора шаблонов.

Избавиться от Vue во Vuex нельзя, он сильно на него завязан.

Так же настройте и убедитесь что у вас работает tree shaking. Инструкция есть на сайте вебпака. Проверить можно с помощью webpack bundle analyzer.

Попробуйте разделить компоненты по их сути:

1. Атомы\блоки - неделимые компоненты, части других компонентов с минимальным набором характеристик. Выполняют одну единственную задачу.
2. Контейнер - компоненты, которые появляются один раз на странице. Шапка, футер, навигация, это всё сюда.
3. Самостоятельные компоненты - сгруппированные компоненты, отражающие суть задачи, которую они решают.

В итоге структура может выглядеть так:

atoms
--button
--textInput

container
--header
--footer
--mainNav

layout
--columns
--grid
--inline

overlays
--overlay

users
--userName
--userAvatar
--userItem

От БЭМ совсем отказываться не стоит, он сэкономит вам кучу времени когда нужно будет что-то поменять в компонентах через месяц и больше.