0xD34F

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

<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, что за дичь-то такая?

Вы же просто метод вызываете - откуда там взяться объекту события? Надо повесить на элемент соответствующий обработчик. Типа так.

Но ведь this.$refs.cpt это объект а не массив.

Откуда такая информация? Как именно определён cpt вы почему-то решили не показывать, а если ref используется совместно с v-for (на том же элементе, или дочерних) - будет массив.

Смените привязку параметра со статической на динамическую:

<my-component :docs='{{ json }}' />

Всё, не надо никакого JSON.parse, docs сразу будет объектом.

пытаюсь остановить выполнение функции

Что-то я такого у вас вообще не вижу. Для отмены действия setInterval надо вызвать метод clearInterval, ну и конечно предварительно сохранить id таймера:

data: () => ({
  intervalID: null,
}),
methods: {
  mouseEnter() {
    this.intervalID = setInterval(() => {
      console.log('тик');
    }, 500);
  },
  mouseLeave() {
    clearInterval(this.intervalID);
    this.intervalID = null;
  },
},

<div v-for="(item, i) in items" :style="!i && { padding: '10px' }">

почему при закрытии через метод Close - окно потом не открывается?!?!

Открывается. Если использовать vue версии 1. Во второй, да - облом. У вас какая? - почему-то мне кажется, что вы об этом даже не задумывались. Ну, то есть - раз не работает как надо, значит вторая, но если вторая то... Какого хрена? - вы пытаетесь менять параметр компонента:

this.show = false;

указываете вырезанный twoWay:

show: {
  required: true,
  type: Boolean,                
  twoWay: false
}

Почему не происходит повторное открытие - потому что вы внутри компонента меняете значение параметра, но снаружи оно не изменяется. То есть, с точки зрения родительского компонента, модальное окно так и осталось открытым. И когда вы повторно пытаетесь его открыть, свойство, отвечающее за состояние окна, не меняет своего значения, vue не видит никаких изменений, и, соответственно, ничего не делает.

В общем - разберитесь с используемой версией vue. И документацию почитайте - корень вашей проблемы в том, что вы пытаетесь использовать инструмент непредусмотренным способом.

UPD. В первую очередь вам следует переписать работу с параметром show - вместо присваивания значения напрямую, генерировать событие, на которое надо будет подписаться в родительском компоненте, и уже там изменять значение переменной, отвечающей за видимость окна (zoomModal, кажется). С чем конкретно стоит ознакомиться для понимания проблемы - раз, два.

Как сделать, чтоб метод из watch отрабатывал только при изменении полей пользователем?

Никак, watch отрабатывает при любых изменениях - в этом его смысл.

Вместо watch используйте обработчик события input.

if (this.articleArray.indexOf(data) === -1) {
  this.articleArray.push(data)

всё равно добавляется

А, позвольте поинтересоваться, каков тип значения, которое вы пытаетесь добавить? Не объект ли? При сравнении объектов сравниваются их ссылки, а не содержимое. Поэтому проверку наличия элемента надо выполнять иначе, по id (если таковой имеется, или другому уникальному свойству), как-то так:

if (!this.articleArray.some(n => n.id === data.id)) {
  ...

Если вдруг попытки добавить уже присутствующие в массиве элементы будут производиться часто, то, чтобы постоянно не бегать по массиву, можно сделать вычисляемое свойство, представляющее набор id содержащихся в массиве объектов и проверять, содержится ли в нём id проверяемого объекта (проверка наличия значения в наборе в среднем выполняется быстрее, чем поиск по массиву):

computed: {
  articleIds() {
    return new Set(this.articleArray.map(n => n.id));
  },
  ...

if (!this.articleIds.has(data.id)) {
  ...

А в чём проблема-то? Всё точно так же, как и с любыми другими параметрами. Например.

Делая по аналогии, я упираюсь в то, что нельзя обернуть router-view в transition-group, вылазит ошибка, что каждый блок должен иметь свойство :key.

Э-э-э, ну и что мешает задать этот key? Неважно какой, просто укажите его.

https://jsfiddle.net/3pojduyk/

Наверное, вместо того, чтобы лепить 4 svg вручную, следовало сделать отдельный компонент, который бы представлял один из элементов даты, и создать 4 экземпляра этого компонента - для дней, часов, минут и секунд. Каждый из экземпляров компонента получал бы собственные максимальные значения счётчика (365 дней в году, 24 часа в сутках, ...), на основе которых можно рассчитывать значения stroke-dashoffset независимо от остальных экземпляров. Как-то так.

В компонентах делайте watch на значение из vuex, как-то так (да, вместо разных компонентов несколько экземпляра одного, но, думаю, суть понятна):

watch: {
  '$store.state.search'(val) {
    this.search = val;
  },
},

А при чём тут json? Ваша работа с JSON'ом кончается после получения результата работы JSON.parse, никакие DOM-элементы никогда не создаются на основе JSON'ов.

Так что речь тут не про json, а про объект, значением свойства которого является HTML-строка, на основе которой надо создавать DOM-элементы. Тут всё просто - кидайте эту строку в v-html.

Хук bind вызывается однократно, в момент привязки директивы к элементу. Используйте update для обработки изменений.