0xD34F

Через масив slides(условно) их не выведешь т.к контент у них различаеться...

Да ну? А что мешает сделать контент свойством элементов slides и передавать каждому слайду то, что нужно?

А что такое this.rooms - массив, объект, есть ли у него вложенные объекты? Раз уж решили не показывать, что это такое...

Можно вместо this.rooms попробовать присваивать JSON.parse(JSON.stringify(this.rooms)) (правда, если внутри есть методы, они отвалятся).

Или можно воспользоваться _.cloneDeep или каким-нибудь аналогом, или реализовать его самостоятельно.

Или можно добавить в компонент метод, который будет возвращать дефолтное значение rooms (т.е., создавать новый объект при каждом вызове), и, когда понадобится ещё один экземпляр rooms, вместо обращения к this.rooms использовать этот метод:

methods: {
  createRooms() {
    return {
      ...
    };
  },
  ...

this.period[moment(itr.next().toDate()).format('YYYY-MM-DD')] = this.createRooms();

например

Есть подозрение что...

Не надо подозревать - надо открыть консоль, и посмотреть, что там происходит. А именно, вы должны были получить предупреждение о том, что шаблон скомпилирован с ошибкой: "You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because... бла-бла-бла".

Добавьте индекс (например, room_index) в v-for="room in rooms".

И замените v-model="room" на v-model="period[day][room_index]".

Сделайте computed свойство, у которого геттер возвращает значение из vuex, а сеттер - дёргает мутацию:

сomputed: {
  checked: {
    get() {
      return this.$store.state.checked
    },
    set(val) {
      this.$store.commit('updateChecked', val)
    }
  }
}

https://jsfiddle.net/4nkh119u/

каким образом сделать зависимость? То есть select model не должен быть активен пока select brand не выбран

Например, так. Добавляете в объекты, на основе которых создаются элементы управления, свойство value, передаёте его в v-model соответствующего элемента (надо будет реализовать v-model для вашего dropdown'а). Делаете computed свойство formData на основе этих value. И задаёте элементам v-if - если элемент имеет зависимость, то пока соответствующее поле в formData не заполнено, элемент не создаётся (или disabled реализовываете - с аналогичной логикой).

как в select model передать данные, которые выводятся в консоль после выбора объекта?

Ну, НАВЕРНОЕ, вместо вывода в консоль эти данные куда-то сохранить надо - и передавать оттуда в соответствующий dropdown.

Добавьте третье состояние, оно же дефолтное - неопределённость, непонятно, авторизован пользователь, или нет:

data: () => ({
  auth: null,
}),
methods: {
  checkUser() {
    ...
    // указываем false только в случае отрицательного результата проверки
    this.auth = false;
    ...
  },
},

<template v-else-if="auth === false">
  ФОРМА АВТОРИЗАЦИИ
</template>

Можно как-то в зависимости от даты отсортировать данные из массива по этим блокам?
То есть в блок "Сегодня" уходит 2018-05-28
В блок "Вчера" 2018-05-27

Да запросто - сделайте несколько computed свойств, соответствующих нужным дням, простая фильтрация массива по дате. И в каждом из блоков используйте соответствующее свойство вместо исходного массива.

Добавьте свойство value каждому элементу массива, его и указывайте в v-model. А item сделайте из обычного свойства вычисляемым.

data: () => ({
  entity: [
    { id: 1, name:   'title', value:   'default title' },
    { id: 2, name: 'address', value: 'default address' },
  ],
}),
computed: {
  item() {
    return this.entity.reduce((acc, n) => (acc[n.name] = n.value, acc), {});
  },
},

<div v-for="n in entity" :key="n.id">
  <label>
    {{ n.name }}
    <input type="text" v-model="n.value">
  </label>
</div>

На div с id 98 и 99 клик работает

Да ну? Нечему там работать, вот эта штука

greet: function () {
    alert('Привет!');
}

должна находиться в methods. От которого у вас одна закрывающая скобка (wtf??!).

когда делаю так

template: '<div class = "brick"  v-on:click="greet">{{ brick.text }}</div>'

выдает ошибку реактивности

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

Какие есть варианты исправить ситуацию:

• Слушать снаружи нативное событие, добавив соответствующий модификатор:
  
  <brick-item @click.native="greet" ...
  
  
• Эмитить событие изнутри компонента при клике по корневому элементу:
  
  <div @click="$emit('click')" ...
  
  
• Добавить корневому элементу компонента передаваемые ему слушатели событий.
  
  Можно конкретно click: <div @click="$listeners.click" ...
  А можно - всё, что есть: <div v-on="$listeners" ...
  
  

Добавление элементов в массив (удаление, изменение), как и аналогичные действия над объектами - они не приводят к созданию нового массива/объекта. Так что всё правильно - старые и новые значения одинаковы.

Чтобы иметь доступ к предыдущему значению, надо создавать новый массив. Т.е., например, сейчас у вас есть this.array.push('hello'). Вместо этого делайте this.array = [ ...this.array, 'hello' ].

Аналогично и с объектами - вместо какого-нибудь this.obj.prop = value будет this.obj = { ...this.obj, prop: value }.

UPD.

watch: {
    array: function (o, n) {
      this.oldData = o
      this.newData = n
    }
  }

У вас тут старое и новое значение местами перепутаны.

Первое что приходит в голову это создать блоки нужного размера и настроить позицию фона.
Но что-то мне подсказывает, что это не лучшее решение

Нормальное решение. Простое и короткое.

Как бы вы это сделали с позиции проектирования и производительности?

Что вы понимаете под "позицией проектирования" я без понятия, а что до производительности - сперва стоит сделать хоть как-нибудь, оптимизацией займётесь потом (если надо будет).

Никогда не имел дела с Canvas, насколько я понимаю, он тут тоже может помочь

Может. Только при чём тогда тут Vue, указанный вами в тэгах?

Использую карусель vue-slick...

Я так понимаю, вы говорите про эту?

Есть кнопка "добавить слайд", после которой нужно "перезапустить" слайдер. <...> Пробую использовать в методе добавления слайда this.$refs.slick.$reSlick(), ничего не получается.

Что неудивительно - внутри reSlick карусель уничтожается и сразу же создаётся. При уничтожении вся внутренняя разметка кроме картинок вырезается, сами же картинки slick держит в отдельном div'е - то есть, только что добавленный слайд попадает в корневой элемент slick'a и сразу же удаляется.

Так что порядок действий при изменении набора слайдов должен выглядеть как-то так - уничтожить карусель, изменить разметку, создать карусель. То есть, вызов $refs.slick.destroy; затем изменение данных, на основе которых строится разметка слайдов; и наконец, вызов $refs.slick.create, обёрнутый в $nextTick.

Заниматься подобной ерундой особого смысла не вижу, лучше будем уничтожать и создавать заново экземпляр самого компонента. Для этого назначим ему key, чьё значение будет зависеть от набора данных, на основе которых строится разметка слайдов. Например.

Задайте :key для списка задач в целом, чтобы он рендерился заново при смене активного списка. Например, так:

<transition-group name="trgroup" :key="active.name">

Демо.

Устанавливайте transition'у значение параметра name в зависимости от текущего маршрута:

computed: {
  routeAnimation() {
    return что-то, зависящее от this.$route;
  },
},

<transition :name="routeAnimation">
  <div :key="routeAnimation"></div>
</transition>

https://jsfiddle.net/wac86yo0/1/

@click="pushNumbars() reader.push(*)"

Вот из-за подобных художеств шаблон и не рендерится.

Между выражениями должна быть точка с запятой, и ещё кавычек не хватает - попробуйте догадаться где. Ну а по-хорошему - вместо этого позорища надо бы метод сделать, так и ошибки будут очевиднее.

// хочу добавить в list_appointments_drugs новый объект drug, но получается что добавляю модель
this.list_appointments_drugs.unshift(this.drug)

Надо делать копию объекта:

this.list_appointments_drugs.unshift({ ...this.drug })

А вообще, раз уж сказали "модель"... Добавьте в компонент свойство - объект, который будет содержать дефолтные значения. И копируйте его в drug, когда необходимо начать редактирование нового объекта (т.е., при создании экземпляра компонента и после добавления в массив):

data: () => ({
  drug: null,
  defaultDrugData: {
    ...
  },
  ...
}),
created() {
  this.resetDrug();
},
methods: {
  addDrug() {
    this.list_appointments_drugs.unshift(this.drug);
    this.resetDrug();
  },
  resetDrug() {
    this.drug = { ...this.defaultDrugData };
  },
  ...
},

Должно быть так?

Во-первых - v-for должен быть у элемента li, а не ul. Во-вторых - чтобы динамически назначать значения атрибутов (у вас это id и for), надо всё-таки использовать v-bind, а не просто вписывать строку, совпадающую с именем индекса из v-for.

Этот код не работает. Совсем.

Разумеется, всё работает. Между "не работает" и "работает не так, как бы мне хотелось" существенная разница. Допускаю, что для вас она трудноуловима, но она всё-таки есть. Попытайтесь её осознать.

test: function() {
    _.debounce(function() {
            console.log('test222');
        }, 500);
}

В debounce должен был быть обёрнут сам метод:

test: _.debounce(function() {
  console.log('test222');
}, 500)

Как можно прикрутить это дело в vue, или как средствами vue подобное реализовать?

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

methods: {
  onMouseOver(e) {
    if (e.buttons) {
      e.target.checked = !e.target.checked;
    }
  },
},

<input
  type="checkbox"
  v-for="i in 3000"
  @mouseover="onMouseOver"
>

для каждого генерировать модель мне кажется не вариант

Вполне себе вариант:

data: () => ({
  checkboxes: Array(3000).fill(false),
}),
methods: {
  onMouseOver(e, index) {
    if (e.buttons) {
      this.$set(this.checkboxes, index, !this.checkboxes[index]);
    }
  },
},

<input
  type="checkbox"
  v-for="(n, i) in checkboxes"
  v-model="checkboxes[i]"
  @mouseover="onMouseOver($event, i)"
>

Работать, правда, будет заметно медленнее, чем без v-model (если чекбоксов много).