0xD34F

// хочу добавить в 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 (если чекбоксов много).

Вместо индекса - ссылка на выбранный объект:

data: () => ({
  activeProject: null,
  ...
}),

Вместо того, чтобы вручную прописывать разметку кнопок - v-for по массиву group:

<button
  v-for="project in group"
  v-text="project.name"
  @click="activeProject = project"
></button>

Вместо обработки события change - v-model:

<input type="checkbox" v-model="task.done">

https://jsfiddle.net/arLfczjv/

Проблема в том, что после первого тыка не хочет рендерится новый лог, он вроде как подгружается, но страница рендерит "первака".

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

Делайте так: второй экземпляр Vue пусть будет создан изначально, а в ItemBlockClick передавайте ему новые данные. Ну или (что было бы более желательно) попробуйте переписать свой код так, чтобы отображением обоих секций управлял один экземпляр vue.

Как минимум, косяк в том, что корневой элемент должен быть один, а у вас их два. Это я про шаблон #analyzes-template - добавьте существующим элементам общий родительский:

<template id="analyzes-template">
  <div>
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
  </div>
</template>

Попробуйте отслеживать изменения user, т.е.:

export default {
  name: 'CustomButton',
  data: () => ({
    input_value: '',
  }),
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    user(val) {
      this.input_value = val.custombutton;
    },
  },
};

Все слишком громоздко, ступор.

А знаете почему? Причина номер раз - козлиные имена переменных, свойств объектов и т.д. Например, если у вас в группах содержатся проекты, то и назвали бы соответствующее свойство projects, а не arr. В проектах содержатся задачи - ну так пусть их список называется tasks, а не arr. А так у вас два разных arr - и ни про один сходу не скажешь, что это такое. Уже достаточно, чтобы запутаться.

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

При добавлении новых задач перетираете их список - зачем?

Немного подправил ваш код, типа вот. Похоже на то, к чему вы стремились?

Попробовала показать работу тут.

Выглядит очень печально. Ну, не работает ни хрена. Так что на этом этапе помочь вам будет весьма затруднительно - неясно, где себя проявляют проблемы, о которых вы говорите (говорите в целом ни о чём, поподробнее бы), а где косяки, допущенные вами при переносе кода в песочницу.

Из странных вещей, которые можно отметить сразу:

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

2. Обновление данных (onDateInfo) - пишите присланные из компонента данные в какой-то непонятный объект, всегда один и тот же (а экземпляры компонента Date всё-таки разные). Это я вообще не понял, бред какой-то.

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

Про npm publish слышали?

Ну и примеры использования конкретно с vue - раз, два, три, ... тысячи их. В общем, погуглил за вас.

А почему бы не использовать в шаблоне значение из props, вместо того, чтобы мучиться с отслеживанием изменений и т.д.?

Ну а так-то можно конечно использовать watch, чтобы следить за изменением props'ов, и переприсваивать что там вам нужно.

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

computed: {
  categories() {
    return this.$store.state.main_page.NEWS.map(n => ({
      value: n.id,
      label: n.name,
    }));
  },
},

Сохранять открытые пункты меню в стек. Верхний элемент стека - текущий список пунктов меню (оформляем в виде вычисляемого свойства). Надо перейти к вложенному - кладём его в стек. Надо закрыть текущий и вернуться к родительскому - удаляем элемент из стека.

https://jsfiddle.net/dLyo3mkw/

У computed свойств можно делать (а вам в данной ситуации и нужно) и сеттеры:

dateStart: {
  get() {
    return moment().subtract(1, this.selectedPeriod).toDate();
  },
  set(value) {
    // ну, тут вам виднее, какой должен код быть
  },
},

из-за того, что при первичном рендере input №2 не существует, на него не применяется библиотека VeeValidate

Не совсем так, "input №2" - он вообще не существует, никогда. При смене значения show используется уже созданный элемент - потому что virtual dom, ага. Из-за этого veevalidate и косячит.

Задайте инпутам key - тогда они будут пересоздаваться при изменении show, и veevalidate заработает как надо.

могу ли я теперь использовать его на странице как...

А вы попробуйте.

как сделать так, чтобы внутри элемента можно было писать какие-то теги и все это запихнуло в контент?

Используйте слоты.

Сделать замену при нажатии кнопки Enter?

Как вариант.

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

Не был задан transition для .overlay и .modal-container.

на второй возникает ошибка, что я делаю не так?

Пытаетесь использовать вырезанную фичу.

как лучше реализовать, чтобы замена символа происходила в том же окне

Используйте watch:

<textarea v-model="input"></textarea>

data: () => ({
  input: '',
}),
watch: {
  input(v) {
    this.input = v.split('1').join('2');
  },
},

Или слушайте событие input:

<textarea v-model="input" @input="onInput"></textarea>

data: () => ({
  input: '',
}),
methods: {
  onInput() {
    this.input = this.input.split('1').join('2');
  },
},