Why are the handler values different for variables assigned reactive data within variables declared with computed() in Vue.js?

I am working on a project using Vue.js. In the code below, ListDataList is declared as a computed property, so it is called whenever the reactive data store.getters['management/banners'] assigned to the list variable changes. Consequently, the for loop inside it is also executed each time.

The problem occurs when ListDataList is called multiple times, leading to the code inside the for loop that assigns an object to the list[index].url property being executed repeatedly. This results in nested objects being assigned to list[index].url.

Upon investigating, I found that since list is a reactive data, it is output as a Proxy. The issue occurs specifically when the Handler property of this Proxy is MutableReactiveHandler, causing the nested object assignment. However, when the Handler property is Object, ListDataList is called multiple times without causing nested object assignments.

I have run this project on several PCs. On some PCs, the Handler property is MutableReactiveHandler, while on others, it is Object.

Why is the Handler property different for the same list variable written in the same code? I would like to understand the reason behind this discrepancy.

const ListDataList = computed(() => {
    const list = changeStatusVal(store.getters['management/banners']);

    for (let index = 0; index < list.length; index++) {
        list[index] = {
            ...list[index],
            button: { name: t('board.modify'), id: 'goEdit', val: list[index].idx },
            button1: { name: t('board.delete'), id: 'delete', val: list[index].idx },
        };

        list[index].url = {
            type: 'link',
            id: 'image',
            name: list[index].url,
            val: list[index].url,
        };
    }
    return list;
});

Below are the images showing the Handler values of the list variable in different environments. When Handler is an Object enter image description here When the Handler is MutableReactiveHandler enter image description here

I was able to solve the nesting issue by adding conditional statements in this way, but I couldn't figure out why the Handler value is different.

const ListDataList = computed(() => {
  const list = changeStatusVal(store.getters['management/banners']);

  for (let index = 0; index < list.length; index++) {
    list[index] = {
      ...list[index],
      button: { name: t('board.modify'), id: 'goEdit', val: list[index].idx },
      button1: { name: t('board.delete'), id: 'delete', val: list[index].idx },
    };

    if (typeof list[index].url === 'string') {
      list[index].url = {
        type: 'link',
        id: 'image',
        name: list[index].url,
        val: list[index].url,
      };
    }
  }
  return list;
});