0xD34F

одно из вложенных свойств через v-model привязывается к чекбоксу
<...>
при попытке прописать v-if с использованием этого свойства, при его изменении ничего в DOM не меняется

Раз ничего не меняется, значит, на самом деле этого свойства изначально нет, оно добавляется через v-model, при первом изменении состояния чекбокса. А vue, как известно, не может обнаружить добавление свойства объекта. Так что это свойство, чтобы оно стало реактивным, должно изначально присутствовать в объекте, и, раз оно используется для задания состояния чекбоска, то пусть дефолтным значением будет false.

UPD. Или можно обновить используемую версию vue на 2.5.0 или выше, там v-model добавляет отсутствующие свойства как реактивные.

Так как одновременно может быть активным только один класс - вместо нескольких булевых свойств сделать одно, которое будет хранить имя активного класса:

data: () => ({
  activeClass: '',
  ...
}),

<p :class="activeClass"></p>

Возможные имена классов сложить в массив, создавать элементы с помощью v-for, перебирая этот массив; по событиям mouseover/mouseout переключать значение активного класса:

data: () => ({
  classes: [ 'какой-то класс', 'ещё класс', ... ],
  ...
}),

<p
  v-for="n in classes"
  @mouseover="activeClass = n"
  @mouseout="activeClass = ''"
>

Похоже на то, что вам нужно?

Обходите массив, считаете все встреченные свойства/значения, оформляете это дело как computed свойство:

groupedItems() {
  return this.items.reduce((acc, n) => {
    for (const k in n) {
      acc[k] = acc[k] || {};
      acc[k][n[k]] = (acc[k][n[k]] || 0) + 1;
    }
    return acc;
  }, {});
}

Выводите с помощью v-for:

<div v-for="(group, groupName) in groupedItems">
  <h3>{{ groupName }}:</h3>
  <div v-for="(value, key) in group">{{ key }} ({{ value }})</div>
</div>

Так:

methods: {
  onClick1() {
    alert('button1 clicked');
  },
  onClick2() {
    this.$refs.button.click();
  },
},

<button @click="onClick1" ref="button">button1: click me</button>
<button @click="onClick2">button2: click button1</button>

??

Так, а в чём принципиальная разница между элементами li? - что-то я таковой не улавливаю. Сделайте массив, содержащий их описания, классы и количество span'ов будут задаваться отдельными свойствами. Дальше обрабатывайте этот массив через v-for. Также добавьте в компонент свойство, которое будет содержать в себе индекс активного элемента, и тогда назначение класса active станет задачей тривиальной:

data: () => ({
  active: null,
  items: [
    { text:  'hello, world!!', numSpans: 3, classes: [] },
    { text:  'fuck the world', numSpans: 6, classes: [ 'yyy' ] },
    { text: 'fuck everything', numSpans: 0, classes: [ 'zzz' ] },
  ],
}),

<ul>
  <li v-for="(n, i) in items" :class="{ active: active === i }">
    <a :class="[ 'xxx', ...n.classes ]" @click="active = i">
      {{ n.text }}
      <span v-for="s in n.numSpans"></span>
    </a>
  </li>
</ul>

.active {
  background: red;
}

computed: {
  reversedItems() {
    return [...this.items].reverse();
  },
},

v-for="n in reversedItems"

Просто динамически задаёте класс:

<input :class="а здесь выражение, определяющее, какие классы будут добавлены">

Несколько примеров того, как это может выглядеть.

Name должна падать в массив labels

Сделайте watcher для choosenMetabolit, что-то вроде

watch: {
  choosenMetabolit(val) {
    this.anMetProfData.labels.push(val.name);
  },
},

а result_1, 2 и 3 имели путь datasets[0, 1 или 2]. data

А вот эту фразу я не уверен что понял. "Имели путь" - в смысле значения result'ов записывались в соответствующие массивы data объектов, лежащих в datasets? Тогда можно дополнить watcher как-то так:

watch: {
  choosenMetabolit(val) {
    const data = this.anMetProfData;
    const sets = data.datasets;

    data.labels.push(val.name);
    sets[0].data.push(val.result_1);
    sets[1].data.push(val.result_2);
    sets[2].data.push(val.result_3);
  },
},

v-bind="ну а здесь ваш объект с атрибутами"

Про параметры компонентов слышали? Делаем компоненту doctor входные параметры name и spec, компоненту specialization параметр spec. Компонент doctor передаёт свой spec в specialization, как-то так.

Я так понял, данные о продукте должны откуда-то из БД подтягиваться.

Вешаете обработчик события input на поле артикула, передаёте ему объект item текущей строки. Внутри обработчика - запрос данных по артикулу, обновление переданного объекта. Чтобы запросы не отсылались при каждом изменении инпута, можно применить debounce. Типа так (шаг с запросом разумеется пропущен, подставляются случайные данные).

Вот этот атрибут v-masonry мне нужно добавлять и убирать по условию.

Это не атрибут, а директива.

Дублировать разметку через v-if v-else неудобно, т.к. блок большой.

Сделайте отдельный компонент - дублировать придётся одну строчку.

Или вообще ни одной, если вместо шаблона воспользоваться render-функцией.

А что такое item_not_sale - это имя класса, или свойство, содержащее в себе имя класса?

Если имя - в первом варианте забыли кавычки, если свойство - второй вариант добавляет не значение свойства, а его имя.

Также неясно, что такое item, есть ли среди этих item'ов такие, которые содержат status равный 2.

В общем - маловато информации, чтобы определённо сказать, где вы ошиблись.

Так? Или так?

v-bind="propsObject"

По сути у меня два компонента получилось upload-files и edit-file . И надо теперь наладить между ними взаимодействие.

налаживайте

Устанавливайте значение с помощью $set.

Т.е., вместо

file['selected'] = true

сделайте

this.$set(file, 'selected', true)

Булево свойство, используете его в v-if, по клику переключаете значение:

data: () => ({
  show: false
})

<button @click="show = !show">{{ show ? 'hide' : 'show' }}</button>
<my-component v-if="show"></my-component>

https://jsfiddle.net/5L4phtua/

UPD. Для того, чтобы показывать несколько экземпляров - массив и v-for:

data: () => ({
  items: []
}),
methods: {
  add() {
    this.items.push(...);
  }
}

<button @click="add">add</button>
<my-component v-for="n in items"></my-component>

https://jsfiddle.net/5L4phtua/1/

У вас же есть объект, который вы хотите перезаписать - можно просто найти его индекс в массиве:

const fileIndex = this.files.indexOf(fileInArr);
this.$set(this.files, fileIndex, response.data);

data: () => ({
  value: '',
  error: false
}),
methods: {
  checkValue() {
    this.error = в зависимости от this.value;
  }
}

<input v-model="value" :class="{ error }" @blur="checkValue">
<span v-show="error">ошибка</span>

.error {
  border-color: red;
}

https://jsfiddle.net/ujr0bgLv/