I have a component that takes an array of 50 objects.

<template>
   <div v-for="(item,index) in items" ref="items" :key="index">
      //
   </div>

</template>

props: {
    items: {
      type: Array,
      required: true,
    },
}

I want to have the prop items checked for their offsetHeight so I made a computed property, grabbed the items by their ref and first tested it by returning just that.

computed: {
  allItems() {
    const all = this.$refs.items;
    return all;
  }
}

in VueTools , this shows an array of HTMLDivElement's and works as expected if I use allItems in place of items in the template.

now I want to implement the check for offsetHeight:

computed: {
  allItems() {
    const all = this.$refs.items;
    return all.filter(x => {
       x.offsetHeight > 300;
    })
  }
}

but this shows the computed property now as 15 so it filtered them but when I change the window height, the offsetHeight in the UI change but the computed property shows 15 regardless. Shouldn't this continuously show the current values?