setInterval прекращает работу кода при создании нового компонента в vue

Сейчас попытаюсь привести код:

methods: {
    
      methods: {
    timeGameMain: function () {
      this.nowTime = 0;
      var nowRandomTime = -1;
      var randomTime = -1;
      var randomBadSubstance = -1;
      var randomGoodSubstance = -1;
      var arrGoodSubst = [];
      var arrBadSubst = [];
      this.stop = setInterval(() => {
        if (this.isPause) {
        } else {
          if (this.nowTime > this.timeGame) {
            this.gameOver();
          }
          //тут мы подготовим массивы чтобы вбросить в TergetComponent когда прийдет время
          if (nowRandomTime === -1) {
            randomTime = this.getRndInteger(2000, 7000);
            nowRandomTime = 0;
            randomBadSubstance = this.getRndInteger(5, 12);
            randomGoodSubstance = this.getRndInteger(2, 10);
            //подготовить массив для создания TargetComponent
            //плохие компоненты
            for (var i = 0; i < randomBadSubstance; i++) {
              var badRand = this.getRndInteger(0, this.allBadSubsts.length - 1);
              arrBadSubst.push(this.allBadSubsts[badRand]);
            }
            //хорошие компоненты
            for (var i = 0; i < randomGoodSubstance; i++) {
              var goodRand = this.getRndInteger(0, this.allGoodSubsts.length - 1);
              arrGoodSubst.push(this.allGoodSubsts[goodRand]);
            }
            //тут момент проброски массива в поле
          } else if (nowRandomTime > randomTime) {
            nowRandomTime = -1; //скидываем счетчик не 0 а в -1 чтобы на след итерации подготовить массив
            for (var i = 0; i < randomGoodSubstance; i++) { //сперва готовим код для props хороших веществ
              var subst = arrGoodSubst[i];
              /*тут доб сл код*/
              var cl = subst.cl + " " + subst.name;
              var path = subst.linkImg + subst.name;
              var linkImg = "";
              if (
                subst.type === "good" ||
                subst.type === "good_thermometer" ||
                subst.type === "bad_thermometer"
              ) {
                linkImg = require(`../assets/substances/good/${subst.name}.png`);
              } else if (subst.type === "bad") {
                linkImg = require(`../assets/substances/bad/${subst.name}.png`);
              }
              var style = this.getRandomPosition();
              style.animationDuration = subst.lifTime+"ms";
/************************************************************************************************/
/*************************************************************************************************/
/*Беда тут. Обьект добавляется в items и таким образом создается новый компонент, только вот после этого
дальше код не исполняется
              this.items.push({   //добавляем с подготовленными параметрами в items
                id: (this.items.length>0) ? (this.items[length-1].id+1) + "" : 0+"",
                name: subst.name,
                lifeTime: subst.lifTime,
                linkImg: linkImg,
                cl: cl,
                style: style,
              });
/*а дальше не исполняется код!!!!!!!*/
              if(this.items == null) {
                console.log("null");
              }
              /*тут доб сл код*/
            }
            arrGoodSubst = []; //очистим массив
            for (var i = 0; i < randomBadSubstance; i++) { //теперь готовим код для плохих веществ
              var subst = arrBadSubst[i];
              /*тут доб сл код*/
              var cl = subst.cl + " " + subst.name;
              var path = subst.linkImg + subst.name;
              var linkImg = "";
              if (
                subst.type === "good" ||
                subst.type === "good_thermometer" ||
                subst.type === "bad_thermometer"
              ) {
                linkImg = require(`../assets/substances/good/${subst.name}.png`);
              } else if (subst.type === "bad") {
                linkImg = require(`../assets/substances/bad/${subst.name}.png`);
              }
              var style = this.getRandomPosition();
              style.animationDuration = subst.lifTime+"ms";
              
              this.items2.push({
                id: (this.items.length>0) ? (this.items[length-1].id+1) + "" : 0+"",
                name: subst.name,
                lifeTime: subst.lifTime,
                linkImg: linkImg,
                cl: cl,
                style: style,
              });
              console.log("Vue - кусок навоза");
              /*тут доб сл код*/ 
            }
            arrBadSubst = [];
          }
          //проверяем на наличие null items удаляем где есть
          let nums = [];
          for(var i=0; i<this.items; i++) {
            if(this.items[i]===null) {
              nums.push(i);
            }
          }
          for(var i=0; i<nums.length; i++) {
            this.items.remove(nums[i]);
          }
          //инкрементируем nowRandomTime
          if (nowRandomTime != -1) {
            nowRandomTime += 20;
            this.nowTime +=20;
          }
        }
      }, 20);
    },

//Компонент который пытаюсь создать:
<template>
  <div
    @mousedown="shoot($event.currentTarget)"
    :class="item.cl"
    :style="item.style"
  >
    <div><img :src="item.linkImg" /></div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {
      isKill: false,
      isDie: false,
    };
  },