VueJs странное поведение в вычисляемом свойстве

Question

У меня есть свойство computed() со следующим файлом console.log:

props: {
 productGroup: {
   type: Object,
   default: {},
 },
 filterState: {
   type: Object,
   default: {},
 }
},

computed: {
filterProducts() {
  console.log(this.productGroup.Polarized);
      // outputs --> "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}"

  console.log(this.filterState.size);
      // outputs --> "standard"

  console.log(this.productGroup.Polarized, this.productGroup.Polarized[this.filterState.size], this.filterState.size);
      // outputs "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}",
                 "undefined", <------ why is that??
                 "standard"

  if (!this.productGroup.Polarized[this.filterState.size] &&
      !this.productGroup['Non-Polarized'][this.filterState.size] &&
      !this.productGroup['Elite Polarized'][this.filterState.size]) {
    return false;
  }
  ...
  ...
  return ...
}

Мой вопрос: почему this.productGroup.Polarized [this.filterState.size] возвращает неопределенное значение, когда this.productGroup.Polarized обновляется с помощью ключа ( this.filterState.size )? Из-за этой проблемы ничего не запускается внутри этого свойства computed (). Всегда возвращается false.

Я провел тест с использованием setTimeout ()

setTimeout(() => {
console.log(this.productGroup.Polarized, this.productGroup.Polarized[this.filterState.size], this.filterState.size);
}, 1000)

//outputs --> "{standard: {mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}}",
//            "{mirrored:TRUE: Array(8), mirrored:FALSE: Array(5)}", <---- correct output
//            "standard"

Я относительно новичок в Vue, я не уверен, что что-то здесь пропустил с Vue реактивность. Почему так себя ведет? Есть ли способ предотвратить это? Я рад предоставить больше информации, если это необходимо.