0xD34F

Консоль говорит, что не может найти product, потому что я не правильно использую хуки.

var prod = product;

при вводе каждого символа с поля слетает фокус

this.form.company_ids.push({
  key: this.form.company_ids.length,
});

this.form.company_ids.push({
  key: ++this.currKey,
});

this.form.company_ids.push({
  key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});

methods: {
  group(item) {
    return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
  },

computed: {
  selectedGroup() {
    return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
  },

<ul v-for="{ items } in data">
  <li v-for="item in items">
    <label>
      <input
        type="checkbox"
        v-model="item.checked"
        :disabled="selectedGroup && selectedGroup !== group(item)"
      >
      {{ item.name }} ({{ group(item) }})
    </label>
  </li>
</ul>

• Вариант раз.
  
  Добавить элементам массива mainCategories свойства, которые будут отвечать за состояния чекбоксов (по умолчанию имеют значения true); массив checkedCategories сделать вычисляемым:
  
  

  data: () => ({
    mainCategories: [
      { merchantId: '1', checked: true },
      { merchantId: '2', checked: true },
      ...
    ],
  }),
  computed: {
    checkedCategories() {
      return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
    },
  },

  
  

  <li v-for="n in mainCategories">
    <label>
      <input type="checkbox" v-model="n.checked">
      {{ n.merchantId }}
    </label>
  </li>

  
  
  
• Вариант два.
  
  При создании экземпляра компонента заполнить массив checkedCategories нужными значениями:
  
  

  created() {
    this.checkedCategories = this.mainCategories.map(n => n.merchantId);
  },

  
  
  

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

В Network указывается не jpeg, а text/html

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

Не работает

есть вариант решения?

Я хочу что бы у инпутов focus срабатывал только по клику

created() {
  this.popup = _.throttle(function(state) {
    this.show = ({
      enter: true,
      leave: false,
    })[state];
  }, 500, {
    leading: false,
    trailing: true,
  });
},

this.popup = _.throttle(show => this.show = !!show, 500, {
  leading: false,
  trailing: true,
});

<a href="#" @mouseenter="popup(1)" @mouseleave="popup(0)">

решил использовать фильтр

зачем передавать: @my-event="myEvent" ?

<modal-notifications :aa.sync="isActive" :message="message"></modal-notifications>

closeModalWindow() {
  this.$emit('update:aa', false);
},

closeModalWindow() {
  this.$emit('input', false);
},

<modal-notifications v-model="isActive" :message="message"></modal-notifications>

Я же делаю из потомка this.$emit('my-event', this.isActive) которое слушает родитель.

эмит выше вроде бы не нужен, но без него не работает

И еще вопрос. Что делает:

myEvent: function(isActive) {
  this.isActive = isActive
}

Почему оно должно что-то принимать? Можно же просто значение из data взять.

obj() {
  return this.items[0];
},

<div v-if="obj">
  <div v-for="(val, key) in obj">
    ...