0xD34F

@click="product.quantity = Math.max(0, product.quantity - 1)"

Вместо computed свойства сделайте фильтр:

filters: {
  price: val => val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ").replace('.', ','),
},

Соответственно, в шаблоне будет:

td {{ product.price | price }}

UPD. Кстати, раз уж вы выводите цены - можно вместо плясок с регулярными выражениями форматировать значение средствами функции toLocaleString, она умеет работать с деньгами, будет как-то так:

price: val => val.toLocaleString('ru', {
  style: 'currency',
  currency: 'RUB',
}),

:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"

infoItem.fadeClass - таких имён свойств не бывает (то есть бывает, но так их задать нельзя, нужны кавычки)

наверное, имелось в виду [infoItem.fadeClass]

Можно добавить key, чтобы компонент рендерился заново. Типа так.

:to="{ path: '/field_of_activity', props: { messageId: 1}}"

Что-то вы тут напутали. Параметры передаются уж точно не через свойство props - оно используется в описании маршрутов.

Если хотите через path, тогда заменяете props на query (или прямо в path добавляете нужные параметры), а в описании соответствующего маршрута указываете что-то вроде props: route => ({ ...route.query }).

Или можно сделать маршрут именованным, тогда path меняете на name с соответствующим значением, а props на params.

Если хотите, чтобы поддерживались оба варианта, тогда в описании маршрута (помимо добавления имени) будет примерно так:

props: route => ({ ...route.query, ...route.params })

UPD. Вот вам демка, как это всё может выглядеть.

при выборе меньше 100 кнопка submit (отправка формы) не появлялась либо не была активна?

<button :disabled="notAllGoalsAchieved">submit</button>

methods: {
  notAchieved(goal) {
    return goal.tasks.reduce((acc, n) => acc + n.value, 0) !== 100;
  },
},
computed: {
  notAllGoalsAchieved() {
    return this.goals.some(this.notAchieved);
  },
},

показывать что конкретная цель не до конца проставлена(каким нибудь текстовым сообщением)

Там, где выводятся имена целей, добавляете что-то вроде

<span v-show="notAchieved(g)">не достигнута</span>

отдельное свойство для каждого элемента

Делаете свойство active, которое будет ссылкой на выбранное изображение, начальное значение null. Выносите модальное окно за пределы v-for - достаточно и одного, знаете ли. В разметке окна меняете все i. на active.. Условие рендеринга окна станет v-if="active". Обработчик клика кнопки закрытия окна: @click="active = null". Обработчик клика на изображение внутри v-for: @click="active = i".

Данные по целям и составляющим их задачам сложить в массив:

data: () => ({
  goals: [
    {
      name: '...',
      tasks: [
        { name: '...', value: 0 },
        { name: '...', value: 0 },
        ...
      ],
    },
    ...
  ],
}),

Сделать метод, который на основании суммы задач будет определять, какие value доступны для выбора:

methods: {
  getValues(tasks, task) {
    const max = 100 - tasks.reduce((acc, n) => acc + n.value, -task.value);
    return [ 0, 10, 20, 30, 40, 50, 60 ].filter(n => n <= max);
  },
},

Отрендерить select'ы:

<tr v-for="g in goals">
  <td>{{ g.name }}</td>
  <td>
    <div v-for="t in g.tasks" class="task">
      {{ t.name }}
      <select v-model.number="t.value">
        <option v-for="v in getValues(g.tasks, t)" :value="v">{{ v }}</option>
      </select>
    </div>
  </td>
</tr>

https://jsfiddle.net/qmu1enhy/

в обычном html файле

В смысле - без использования систем сборки?

Ну, подключаете код и стили:

<script src="vue-date-pick-master/dist/vueDatePick.js"></script>
<link href="vue-date-pick-master/dist/vueDatePick.css" rel="stylesheet">

Всё, компонент будет доступен через переменную VueDatePick.

Дальше можете указывать его в components:

components: {
  VueDatePick,
},

Или зарегистрировать глобально:

Vue.component('date-pick', VueDatePick);

Не надо рендерить элемент, в который вы выводите data.capitalization, пока нет data: v-if="data".

В main.js:

import Vue from 'vue/dist/vue.esm.js'

В store.js:

import Vue from 'vue'

Вы бы определились, какую сборку vue хотите использовать. А то сейчас подключаете vuex к одной, а реально используете другую. Естественно, $store оказывается undefined.

Чтобы увидеть завершение анимации прогресс бара, удалять его надо по событию transitionend. Добавьте отдельную переменную, которая будет отвечать за отображение прогресс бара, и меняйте её в соответствующем обработчике, как-то так.

Используйте ref. В шаблоне, например:

<div data-bullshit-attribute="hello, world!!" ref="div"></div>

В коде:

const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');

Одно непонятно - а какого чёрта сразу не положить нужное значение в data, зачем атрибут читать?

Не надо ничего очищать. Пусть у каждого элемента будут собственные options. В шаблоне второго селекта меняете
v-for="o in getOptions2(index)" на v-for="o in user.options"; в обработчик change первого селекта передаёте текущий объект: @change="changeUser(user)", и соответственно, полученные данные кладёте в этот объект вместо options2 (их просто вырезаете):

changeUser(user) {
  fetch('https://jsonplaceholder.typicode.com/photos')
    .then(r => r.json())
    .then(d => this.$set(user, 'options', d));
},

Потому что нечего находить - ваш шаблон не существует в DOM-дереве (при сборке компилируется в render-функцию); искать элементы вы пытаетесь в хуке created, это слишком рано, создание экземпляра vue и его монтирование происходит не единовременно - используйте хук mounted.