VueJs在计算属性中的奇怪行为

I have a computed() property with the following console.log within it:

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.filterState.size)更新this.productGroup.Polarized时,this.productGroup.Polarized [this.filterState.size]返回未定义?由于这个问题,没有任何内容可以在此compute()属性内运行。它总是返回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的反应性。为什么会这样呢?有办法防止这种情况发生吗?如果需要,我很乐意提供更多信息。