vue中，獲取dom的children失敗

在vue項目中，有以下代碼：

<div ref="warePage">
        <sub-products-setting id="floor_0" v-if="pSubProductInfoVO.isShow" ref="subProductsRef"></sub-products-setting>
        <basic-info id="floor_1" v-if="pBasicInfoVO.isShow" ref="basicInfoRef"></basic-info>
        <sku-info id="floor_2" v-if="pSkuInfoListVO.isShow" ref="skuInfosRef"></sku-info>
        <product-imgs id="floor_3" v-if="pProductImgInfoVO.isShow" ref="productImgRef"></product-imgs>
        <delivery-info id="floor_4" v-if="pDeliveryInfoVO.isShow" ref="deliveryInfoRef"></delivery-info>
        <ware-house id="floor_5" v-if="pWarehouseInfoVO.isShow" ref="warehouseRef"></ware-house>
        <description-info id="floor_6" v-if="pDescriptionsInfoVO.isShow" ref="descriptionRef"></description-info>
        <account-info id="floor_7" v-if="pManAccountVO.isShow" ref="accountInfoRef"></account-info>
        <ordiary-info id="floor_8" v-if="pOrdinaryAttrInfoVO.isShow" ref="ordinaryInfoRef"></ordiary-info>
        <!--虛擬組套商品不顯示該模塊-->
        <business-relate id="floor_9" v-if="pBusinessRelateInfoVO.isShow && !isVirtualSuitWare" ref="businessInfoRef"></business-relate>      
</div>

然后再created中遍歷：

 created() {
            // 監(jiān)聽鼠標滾動事件
            window.addEventListener("scroll", function () {
                console.log(typeof self.$refs.warePage.children)
                self.$refs.warePage.children.forEach((floor, index) => {
                    // if (winHeight + scrollHeight - $(floor).offset().top > winHeight / 2) {
                        console.log("activeIndex--->" + index)
                    // }
                })
            }, false)
        }
        
        然后滾動鼠標的時候，控制臺報錯：

我看到控制臺中打印出來是object類型

 console.log(typeof self.$refs.warePage.children)

但是：
控制臺中打印self.$refs.warePage.children的結(jié)果是：

請問是什么原因呢？我需要遍歷ref為warePublishPage下的children怎么處理？