在某些情况下（对我而言尚不清楚），Vuex状态突变会在document.querySelector（'[...]'）（strict = true）上引发错误

Question

在App.vue的mounted()函数中-据我所知，当所有子组件均已加载并且DOM可被读取和操作时，该函数将触发-加载了配置对象。配置对象通过document.querySelector([...])收集了几个DOM元素；使用GSAP进行某些动画时，需要这些元素。对象的结构如下：

let config = {
  container: {
    cLogo: {
      el: document.querySelector('.c-logo'), // <-- this causes the error - see later
      tweenParamsTo: {[...]},
      status: 'hidden',
    },
  }
}

配置对象的加载方式如下：

// App.cue - mounted() // `Back` is imported from GSAP
let config = UIConfiguration.getSettings(Back)
console('config =', config) // displays the complete obj correctly

并分配给Vuex商店：

// Mutating a VueX store state causes error:
this.$store.commit('generateSettings', config)

控制台将正确显示设置对象。但是，一旦我尝试通过一个突变将config对象分配给商店，就会抛出此警告：

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in mounted hook: "RangeError: Maximum call stack size exceeded"

（存储设置为strict，当strict设置为false时，警告不会出现。）

只要我移除document.querySelector()，警告就会消失。然后，逐步重新协助这些DOM查询，并在一段时间内起作用，直到突然再次出现警告。

Vue DevTools显示cbtnNaMain: el:HTMLButtonElement ...

这里可能是什么问题？我知道我不应该依赖console.log，因为它总是实时更新。所以我想知道，DOM是否真的已经以document.query的工作方式构建了？