Vue Reactivity updating the wrong object/proxy

I have the following object that is being rendered about 9 times:

<form-input-select-multi
          :select-field="block.field"
          :select-values="selectValues ? Array.isArray(selectValues) ? selectValues : [selectValues] : []"
          :select-index="blockIndex"
          :select-options="block.options ? block.options : []"
          :max-values="block.maxValues"
          :block-index="blockIndex"
          :endpoint="block.endpoint"
          @hasChanged="hasChanged"
        >
          <form-input-label
            v-if="block.label"
            :labelField="block.field"
            :labelTitle="block.label"
          />
</form-input-select-multi>

The block.options is the following:

[
  {
    "id": 0,
    "title": "middle-left"
  },
  {
    "id": 1,
    "title": "middle-centre"
  },
  {
    "id": 2,
    "title": "middle-right"
  },
  {
    "id": 3,
    "title": "bottom-left"
  },
  {
    "id": 4,
    "title": "bottom-centre"
  },
  {
    "id": 5,
    "title": "bottom-right"
  },
  {
    "id": 6,
    "title": "top-left"
  },
  {
    "id": 7,
    "title": "top-centre"
  },
  {
    "id": 8,
    "title": "top-right"
  }
]

In my component I setup this state:

 const state = reactive({
    search: '',
    searchWidth: 6,
    controlWidth: 150,
    selectedItemIndex: -1,
    selectedOptionIndex: -1,
    isFocused: false,
    nextPageUrl: store.getUrl(`/admin/${props.endpoint}`),
    values: [],
    options: [],
    currentValue: "",
    loading: false
  });

In my onBeforeMount, I do the following:

 store.selectData[props.selectIndex] = state;
 if(props.selectOptions.length > 0) state.options = props.selectOptions;

I have a watcher:

watch(() => props.selectValues, (values) => {
    state.values = values.map((item) => ({...item, isDisabled: false}));
    if (values && values.length > 0) disableSelectedOptions();
    setCurrentValue();
  })

This is because the props that comes as props.selectValues is requested by the parent and sometimes it does not arrive before the component is mounted.

And this function:

const disableSelectedOptions = () => {
    state.values.forEach(item => {
      state.options.forEach(option => {
        if (option.id === item.id) {
          disableOption(option);
        }
      });
    });
  }

The problem is that although there are 9 object which instantiate 9 different states (objects/proxies). Whenever the first object is being looped on inside the disableSelectedOptions function, the function disables the option in every of those 9 instances although I’m specifically searching for the current object (current component) since I’m looping through the state.values (current component).

Am I using an anti-pattern here of updating reactivity?