0xD34F

А можно ли как то прокинуть это событие далее(всплытие), что бы можно было его прослушать на любом компоненте-предке, в том числе и на корневом?

Вручную в каждом компоненте делайте emit, или гуглите, как сделать шину событий (event bus) - можно будет подписываться на нужное событие где угодно.

Всё работает так, как и должно. Чтобы получить требуемое поведение, надо обрабатывать другие события:

@mouseenter="showDrop = true"
@mouseleave="showDrop = false"

UPD. А зачем два свойства для управления отображением форм? Они что, могут показываться одновременно? Может, лучше сделать одно свойство, которое будет содержать имя показываемой формы? Как-то так:

data: () => ({
  showForm: 'auth',
  // ...
}),

Форма авторизации: v-show="showForm === 'auth'", @click="showForm = 'reg'".
Форма регистрации: v-show="showForm === 'reg'", @click="showForm = 'auth'".

Если в одном компоненте произойдет ошибка, будет ли это видно в другом?

Если нет, то подскажите, как...

vuex

Переносите errorOnUpdate в хранилище, а в миксине делаете computed свойство, достающее errorOnUpdate и метод, который будет дёргать мутацию, меняющую значение errorOnUpdate (или просто заменяете присваивание вызовом мутации в методе update, тут вам виднее).

Замените

const Vue = require('vue');

на

const Vue = require('vue').default;

Могу предложить пару вариантов.

1. Пусть данные компонента станут свойствами объекта, тогда их можно будет получать по имени свойства. Типа так.

2. Сделайте computed свойство, которое будет представлять текущий набор данных. Типа так.

...

А, ну и конечно ключевое слово this - оно тоже доступно в шаблоне. Так что есть и третий вариант (ну, на самом деле это вариант "полтора" - отличий от первого по сути нет никаких).

UPD. Конечно, все эти три варианта суть одно и то же - получение свойства объекта по имени в переменной. То есть, в конечном счёте, проблема в слабом знании языка. Я бы на вашем месте подтянул основы, а то так и будете сюда бегать с такими вот тривиальными вопросами.

@changeMessage="changeMessage"

Да ну? Я вот слышал, будто бы

директивы прослушивания событий v-on внутри DOM-шаблонов автоматически преобразуются в нижний регистр (из-за нечувствительности HTML к регистру), поэтому v-on:myEvent станет v-on:myevent — что делает прослушивание события myEvent невозможным

контент у всех блоков разный - поэтому в массив их не засунуть

Засунуть. За отличающийся контент пусть отвечает отдельное свойство элементов массива. Если же контент вот прям совсем разный, ничего общего - оформить блоки в виде отдельных компонентов, хранить в элементе массива имя компонента - ну а дальше вместе с v-for использовать :is.

Уберите обработчик события change, он тут не нужен.

Используйте v-if - пока данных нет, не надо пытаться на их основе ничего рендерить. Как-то так:

<thead v-if="options.head">
...
<tbody v-if="options.body">

Ясно же написано - метод не определён. Добавьте его в methods компонента:

methods: {
  trans
}

mutations: {
  [GET_USER_INFO](state) {
    axios.get('http://localhost:3000/user')
      ...

Ох ни хрена ж себе. Документацию-то читали?

хочется, чтоб saveProfile или действие, которое внутри - this.$store.dispatch('loadInfo') вызывалось сразу после того, как загружено начальное состояние

created

<alien-component
  :value="value"
  @input="$emit('input', this.$event.target.value)" 
/>

Никаких target'ов не надо, вы из компонента получаете само значение, так что правильно будет так:

<alien-component
  :value="value"
  @input="$emit('input', $event)" 
/>

Выкидывайте v-model, вместо этого задавайте элементам value, и вешайте обработчик события input, в который будет передаваться имя свойства, а внутри будет дёргаться мутация:

<el-select :value="item2.select.value" @input="onInput(item2.name, $event)">

methods: {
  onInput(propName, propVal) {
    this.$store.commit('updateForm', { propName, propVal });
  },
},

Дело в том, что если в форме присутствует всего одно поле ввода, то, согласно спецификации, нажатие enter'а должно приводить к отправке формы:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

Что делать? Блокировать действие по умолчанию при нажатии enter'а, добавить input'у @keypress.enter.prevent.

Как я понял, v-model в компоненте ProductRow обновляет почему-то не локальную копию item, а state у стора

А с чего вы взяли, что у вас тут где-то есть какая-то "локальная копия"? Нет, серьёзно - попробуйте показать то место у себя в коде, где, как вам кажется, вы создаёте копии значений из стора.

Понадобятся два свойства - массив имён компонентов и имя выбранного в данный момент компонента:

data: () => ({
  items: [ 'имя-компонента-1', 'имя-компонента-2', 'имя-компонента-3' ],
  selected: null,
}),

На основе массива с именами создаётся список, элементам которого назначается обработчик клика, устанавливающий текущее имя компонента в качестве выбранного:

<li
  v-for="n in items"
  v-text="n"
  @click="selected = n"
></li>

Если что-то выбрано, рендерим это что-то:

<component v-if="selected" :is="selected"></component>

Гм-гм... Опять несколько корневых элементов сделали - не далее как месяц назад, вы уже сталкивались с подобной проблемой. Не надоело продолжать наступать на одни и те же грабли?

Так, теперь что делать.

1. Заголовок таблицы оборачиваете в thead
   
2. В draggable добавляете атрибут element="tbody"
   
3. Элемент tr из шаблона компонента table-operations выбрасываете, v-for будет по item-operation
   
4. В компоненте item-operation оборачиваете все td в один общий tr
   

Объект события доступен как $event, так что

<button @click="someFunction($event.target)">Click!</button>

Но вообще, если вы действительно собираетесь

повесить на него определенный класс

, то так делать не надо. О том, как правильно работать с классами, вы можете прочитать в документации.

Теперь вопрос в другом. Как правильно поступать. Если объекты и массивы передаются по ссылке? делать еще одну операцию по копированию?

Да. Вместо

let puzzles = getters.getPuzzles

делайте

let puzzles = [...getters.getPuzzles]