0xD34F

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

Делаете свойство 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.

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

Это какую такую логику? У вас там в created будет простой вызов экшена, это одна строка. Уместно, делайте.

UPD. Вынесено из комментариев:

Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

Можете в своём main.js завернуть создание экземпляра vue в коллбек экшена, который загружает данные:

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

Только пользователь ничего не увидит в процессе загрузки. А если инициировать загрузку данных внутри, можно показывать какой-нибудь прелоадер, пока данные не будут получены:

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

Во-первых - никаких getElementById, ставьте ref на интересующий вас элемент.

Во-вторых - если вам надо сделать прокрутку в самый низ, не надо указывать какое-то определённое число. У элемента есть свойство scrollHeight.

Во-третьих - надо дождаться, пока будет показан дополнительный контент, и только потом выполнять прокрутку, т.е., используйте nextTick:

this.$nextTick(() => {
  const el = this.$refs.container;
  el.scrollTop = el.scrollHeight;
});

И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive.

Информации примерно 0. Что за вкладки, где используется keep-alive... Ничего непонятно.

Если в keep-alive завёрнуто ваше окно, то выполняйте проверку this.show и прокрутку (можно вынести этот код в отдельный метод, чтобы не дублировать) и в хуке activated.

UPD. https://codesandbox.io/s/vue-template-ow505

Вместо гамбургера отображается надпись "Меню"

Нужно подключить иконочный шрифт. Как это сделать - можете прочитать в документации.

Вместо того, чтобы зашивать в шаблон варианты выбора, делаете массив и отдаёте его в v-for, предварительно прогнав через функцию-фильтр, где будут отброшены уже выбранные варианты (кроме текущего):

<select v-model="user.name">
  <option value="">Выбрать</option>
  <option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
</select>

getOptions(index) {
  return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
},

https://jsfiddle.net/gs0oenxq/

Отслеживайте в компоненте изменения параметра роута:

watch: {
  '$route.params.id': {
    immediate: true,
    handler() {
      /*
       * здесь идёт выполнение каких-то действий,
       * направленных на обновление компонента - запрос данных, например...
       * тут уж вам виднее, что это должно быть
       */
    },
  },
},

запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует

Нет такой переменной. Есть переменная, которая могла бы в подобном качестве использоваться - loading, если проверять в начале метода upload, что она не true - но она не используется никак (по крайней мере, в показанном вами огрызке кода).

UPD. Вынесено из комментариев:

есть переменная end, статус которой проверяется постоянно

А какой смысл в этой проверке, если вы сбрасываете значение end в false сразу после того, как выставили true? Можно дожидаться выполнения запроса - перенеся this.end = false в finally (однако, само по себе это не гарантирует, что вы не сможете отправлять следующий запрос до окончания предыдущего).