0xD34F

Так, а в чём принципиальная разница между элементами 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/

Как можно его подключить в проект без использования webpack, vue-cli?

"Подключить" - никак (по крайней мере, в документации иных способов кроме как с использованием сборщиков не упоминается). Можно разве что утащить исходники, и... Вот. Это, разумеется, дикость. Освойте лучше vue-cli - там нет ничего сложного.

UPD [Дописано сильно позднее]. Появилась возможность подключить через cdn. Например.

v-model

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

input.value = какое-то значение;
input.dispatchEvent(new Event('input'));

Вот так. Данные строки таблицы доступны через параметры слота. Например (кнопка Info).

почему то, выводятся данные в виде undefined

Да понятно почему - вы ничего не возвращаете из метода getFriends.

То есть, должно быть так:

getFriends() {
  return Vue.axios.get(...

Использовать, соответственно, как-то так:

this.$friends.getFriends().then(friends => console.log(friends))