how to prevent a re-rendering of a variable that is not being used in the HTML of my vue.js component?

I am trying to recreate a real example of my code. In my real code, this line is actually a component that will fetch an endpoint every few seconds, and fetch a random array of "n" length, myData it will contain these fetch.

<div v-for="item in addingData(myData)">  <!-- in My real code, "myData" should be the answer of an endpoint, is an setInterval, returns data like [{id:1},{id:2}] -->
  
</div>

I am simulating that the response changes in myData with the help of setTimeOut

mounted() {
  setTimeout(() => {
    console.log('First data');
    this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
    setTimeout(() => {
      console.log('second data');
      this.myData = [{ id: 4 }, { id: 4 }];
      setTimeout(() => {
        console.log('Third data');
        this.myData = [];
      }, 3000);
    }, 3000);
  }, 2000);
},

I am trying to make that every time I receive data in myData, the list of the concatenation of the received data is shown without having repeated data. That's why every time I receive data, that calls the function addingData(myData) that will do this data concatenation. I'm using the function v-for="item in addingData(myData) and auxData is the variable that will do this concatenation.

why when there is new data, the addingData function is called 2 times and how can I prevent it?

in terms of performance this should be the output in the console.log:

what causes this re-rendering and how can I avoid it?

this is my live code:

https://stackblitz.com/edit/vue-l7gdpj?file=src%2FApp.vue

<template>
  <div id="app">
    <div v-for="item in addingData(myData)">
      
    </div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  data() {
    return {
      myData: [],
      auxData: [],
    };
  },
    mounted() {
      setTimeout(() => {
        console.log('First data');
        this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
        setTimeout(() => {
          console.log('second data');
          this.myData = [{ id: 4 }, { id: 4 }];
          setTimeout(() => {
            console.log('Third data');
            this.myData = [];
          }, 3000);
        }, 3000);
      }, 2000);
    },
  methods: {
    addingData(getDataFetch) {
      console.log('Entering AddingData', getDataFetch);
      if (getDataFetch.length !== 0) {
        if (this.auxData.length === 0) {
          //Adding initial data
          this.auxData = getDataFetch;
        } else {
          //prevent duplicated values
          getDataFetch.forEach((item) => {
            const isNewItem = this.auxData.find((itemAux) => {
              return item.id === itemAux.id;
            });
            if (!isNewItem) {
              //adding new data 
              this.auxData.unshift(item);
            }
          });
        }
      } else {
        //if there is not data, return []
        return this.auxData;
      }
    },
  },
};
</script>

from how to prevent a re-rendering of a variable that is not being used in the HTML of my vue.js component?