Vue3中如何检测solana-wallets-vue的DOM更新并实时获取钱包公钥？

solana-wallets-vue是Solana钱包的VueJS实现，提供浏览器钱包连接按钮。组件可正常完成钱包连接，但连接后无法立即获取钱包公钥，仅在刷新页面后，才能在onMounted生命周期钩子中读取到公钥。

组件使用代码 #

<!-- Wallet Connect -->
<wallet-multi-button dark></wallet-multi-button>

组件初始DOM结构 #

<div class="swv-dark">
  <button class="swv-button swv-button-trigger"> Select Wallet </button>
</div>

连接钱包后的DOM结构 #

钱包连接成功后，组件DOM会自动更新，但不会触发任何Vue生命周期事件：

<div class="swv-dark">
  <div class="swv-dropdown">
    <button
      class="swv-button swv-button-trigger"
      aria-expanded="false"
      title="DqabcUFkt9UvV9wDEtK59nySRPhy71n3JuFkCcw854vL"
      style="pointer-events: auto;"
    >
      <i class="swv-button-icon">
        <img src="data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB3aWR0aD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI" alt="Phantom icon">
      </i>
      <p>Dqab..54vL</p>
    </button>
    <ul aria-label="dropdown-list" class="swv-dropdown-list" role="menu">
      <li class="swv-dropdown-list-item" role="menuitem">Copy address</li>
      <li class="swv-dropdown-list-item" role="menuitem"> Change wallet </li>
      <li class="swv-dropdown-list-item" role="menuitem"> Disconnect </li>
    </ul>
  </div>
</div>

当前仅刷新后生效的代码 #

以下代码仅在页面刷新后，onMounted钩子中才能打印出钱包公钥：

onMounted(async () => {
  console.log('onMounted')
  const { publicKey, sendTransaction } = useWallet()
  
  if (publicKey && publicKey.value) {
    console.log('publicKey', publicKey.value.toBase58())
  }
})

内容的提问来源于stack exchange，提问作者Leon Gaban