0xD34F

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

Но ведь 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 для обработки изменений.

Просто передавайте индекс в обработчик:

@click="testA(index)"

testA(index) {
  alert(index);
}

Корневой элемент должен быть один. А у вас их сейчас три.