Console.logでNodeList全体表示するのと、プロパティを指定して表示するので結果が異なる

Question

Vueにて要素数をループで表示し、要素数に応じて横スクロールしたりしなかったりするものを作っています。

要素のサイズをmountedで取得しているのですが、
console.log()で

• 要素の内容を取得・表示しているのと、
• 要素の特定のプロパティ（offsetWidth）を指定して取得・表示しているのと

では結果が違います。
ちなみに$nextTickで囲んでいてもいなくても結果は同じです。

結果例として、

NodeList [div.container]
  0: div.member-container
    ~略~
　　offsetWidth: 288
    ~略~
  length: 1
  [[Prototype]]: NodeList
96
96

NodeList [div.container]
  0: div.member-container
    ~略~
　　offsetWidth: 375
    ~略~
  length: 1
  [[Prototype]]: NodeList
168
168

です。
ちなみに、要素の検証で対象エレメントを見ると、
プロパティを絞り込んで表示したほうではなく、全体を取得したほうの数値となります。

これってどうしてこうなるのでしょう？？？

動作環境は↓です。

windows10
Google Chrome (ver: 96.0.4664.45)

内容は↓です。

<div class="box">
  <div class="container">
    <div v-for="(item, i) of items" class="item" :key="i">
      <img :src="item.src">
    </div>
  </div>
</div>

↑※itemsの数でcss のoverflow-xによってスクロールするかしないかが変わるようにしたい

  mounted() {
    this.$nextTick(() => {
      console.log(document.querySelectorAll('.container'))
      console.log(document.querySelectorAll('.container')[0].offsetWidth)
      console.log(document.querySelector('.container').offsetWidth)
    })
  }

.box {
  text-align: center;
}
.container {
  display: inline-flex;
  max-width: 100%;
  margin: auto;
  overflow-x: scroll;
}
.item {
  width: auto;
  padding: 0 12px;
}
.item img {
  width: 42px;
}

Answer 1

もしかしてと思い、ちょっと実験してみました。

質問では省略してしまっていたのですが、
質問の事象が起きているものが実際は↓になっています。

<div class="box">
  <div class="container">
    <div v-for="(item, i) of items" class="item" :key="i">
      <ImgComponent />
    </div>
  </div>
</div>

[ImgComponent]
<div class="thumb">
  <img src="hogehoge">
</div>

<style>
.thumb {
  width: 42px;
}
</style>

※コンポーネント内でスタイル設定しています。

上記のとおり、画像を子コンポーネントとして呼んでいたのですが、
子コンポーネントにせずに直接書くと

<div class="box">
  <div class="container">
    <div v-for="(item, i) of items" class="item" :key="i">
      <div class="thumb">
        <img src="hogehoge">
      </div>
    </div>
  </div>
</div>

正しく数値が取れました。

子コンポーネントで画像をとると、起きるようですが…
なんか納得いかない。
けどしょうがない…