0xD34F

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

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');
  },
},

Все делал по этой документации...

<section v-if="show" transition="fade"></section>

Не всё. Анимируемый элемент надо помещать в transition - это компонент, а вовсе не атрибут. Правильно будет так:

<transition name="fade">
  <section v-if="show"></section>
</transition>

Или, если использовать синтаксис pug:

transition(name="fade")
  section(v-if="show")

Одного vue будет недостаточно - помимо отображения данных на клиенте, надо ещё следить за изменением файлов на сервере. Можно попробовать посмотреть в сторону node.js + websocket.

Набросок решения, сервер (используется ws):

const fs = require('fs');

let ID = 0;
const clients = {};

new (require('ws').Server)({
  port: 8081,
}).on('connection', ws => {
  const id = ++ID;
  clients[id] = ws;

  ws.on('close', () => {
    delete clients[id];
  });
});

fs.watch('./', (eventType, filename) => {
  if (/\.json$/.test(filename)) {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (!err && data) {
        const info = JSON.stringify({
          filename,
          data: JSON.parse(data),
        });

        Object.values(clients).forEach(n => n.send(info));
      }
    });
  }
});

Клиент:

<div id="app">
  <div v-for="(data, name) in files">
    <div>{{ name }}</div>
    <div>{{ data }}</div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    socket: null,
    files: {},
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8081');
    this.socket.onmessage = e => {
      const f = JSON.parse(e.data);
      this.$set(this.files, f.filename, f.data);
    };
  },
});

Можно. В любом компоненте доступны ссылки на корень, родителя и экземпляры вложенных компонентов. Так что зная, где находится экземпляр компонента с вашим isotope'ом относительно текущего экземпляра или корня, достучаться до него труда не составит.

Но не нужно. Лучше воспользуемся vuex.

В компоненте, из которого надо "получить доступ", вызываем мутацию, изменяющую значение выбранного фильтра, а в компоненте с isotope'ом устанавливаем наблюдение за этим значением, где и дёргаем $refs.cpt.filter. Типа так.

Или, к чёрту $refs - можно оформить в хранилище геттер, представляющий отфильтрованные данные, и создавать элементы для isotope'а на их основе. Как это может выглядеть.

А с чего вы взяли, что emit не работает, чем докажете свои слова?

Я так думаю - всё работает, просто вы забыли о всплытии событий. Вы кликаете на .news-popup__content__close, генерируется событие click, оно обрабатывается - выполняется emit, генерируется событие close, оно обрабатывается в соответствующем обработчике, popup убирается. При этом событие click никуда не делось, оно всплывает, и в .news-block обрабатывается ещё раз - только что удалённый popup снова рендерится. Ну а внешне это всё выглядит так, будто ничего и не произошло.

Что делать? Понятно что - останавливать всплытие, т.е.,

<div class="news-popup__content__close" @click="$emit('close')"></div>

замените на

<div class="news-popup__content__close" @click.stop="$emit('close')"></div>

P.S. А почему на каждый элемент .news-block у вас отдельный popup, что за дичь-то такая?