Evgeny Kulakov

как вариант в main.js в хуке beforeCreate выполнить инициализации заполнения стора

new Vue({
  el: "#app",
  router,
  store,
  beforeCreate() {
    this.$http
      .jsonp(getURL(method, { offset: 1, album_id: 0, extended: 1 }))
      .then(response => {
        return response.json();
      })
      .then(data => {
        return data.response.items.map(items => {
        ///
          return items;
        });
      })
      .then(data => {
        this.$store.dispatch("getData", data);
      });
  {

Ну, во-первых - переменные всё-таки обновляются. Во-вторых - проблема тут не столько в использовании nextTick, сколько в том, как браузер оптимизирует отрисовку страницы. Если одно и то же css свойство обновляется несколько раз подряд, то отрисовано будет только последнее состояние. Чтобы добиться желаемого поведения, вам надо спровоцировать reflow между изменениями свойства - тут есть разные варианты. Например.

1. Выделить одну главную функцию сервиса
2. Сделать её, сверстать и выкатить, это будет MVP
3. Не заморачиваться с вёрсткой
4. Не заморачиваться с методами авторизации
5. Не думать про нагрузку, не заниматься оптимизацией кода и БД
6. Если поймали себя на мысли что вы думаете какой паттерн тут применить вы в Ж, просто пишите код, который работает!!
7. Не совмещать написание сервиса, который вы РЕАЛЬНО хотите запустить с изучением чего-то нового (языка, БД). Утоните в учёбе и никогда не запустите.

Это всё на своём опыте написания проекта говорю вам а не голословно ))

Делайте получение стиля через метод, в который будете передавать Id по которому определять какой стиль вернуть. Ну или прямо в атрибуте пишите

<div v-bind:class="{ 'класс_для_определенного': id === 10, 'класс_для_всех': true }></div>

Самый простой вариант - сделать так, как это рекомендуют разработчики Vue.
В модуле empty_block вместо экспорта объекта можно экспортировать функцию возвращающую объект.

export default function () {
  return {
    title: '',
    hash: '',
    end: {
      isEnd: 0,
      type: 0
    }
  }
}

В других модулях соответственно просто пишешь:

import emptyBlock from 'emptyBlock'
let block = emptyBlock()

Почему у вас объект остаётся реактивно связан, так потому-что объекты в JS передаются по ссылке, а не по значению, соответственно даже если вы пересобрали объект с помощью { ...someObject }, объекты которые содержал someObject остаются теми же и при любой их мутации у всех владельцев ссылки на объект он меняется.

Кстати, хочу отметить, что в JS не принято писать в snake_case, предпочтителен camelCase.

https://codepen.io/gabrieleromanato/pen/LpLVeQ

В событие компонента mounted()
добавить показ прелоадера, запустить методы загрузки данных
убрать прелоадер, когда они завершатся (с помощью Promise.all)
Читать про промисы тут - https://learn.javascript.ru/promise

Примеры:
один запрос:

mounted() {
	this.showPreloader = true
	this.$http.get('/someUrl').then(response => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
		// записываем полученные данные куда-либо
		this.someData = response.body
	}, response => {
		// запрос завершился ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

Несколько запросов:

mounted() {
	this.showPreloader = true
	Promise.all([
		this.$http.get('/someUrl'),
		this.$http.get('/someUrl2')
	]).then(results => {
		// данные загружены, убираем прелоадер
		this.showPreloader = false
	}, response => {
		// один или несколько запросов завершились с ошибкой
		// показываем сообщение об ошибке
		this.showPreloader = false
		this.showError = true
	});
},

PS. Код справедлив для однофайловых компонентов с использованием Webpack. Используется синтаксис ES6.