Vue3 中如何获取选中复选框后所有 span 元素的值 - 使用 <script setup>

<template>
  <td class="col2">
    <a-checkbox v-model:checked="adviceOne" />
    <span>监测血糖（空腹+三餐后2小时血糖，一周一次直到分娩）</span>
  </td>
  <td class="col2">
    <a-checkbox v-model:checked="adviceTwo" />
    <span>监测血压，</span>
    <a-input v-model:value="day1" style="width:100px;border-style: hidden;border-bottom: 1px solid #050505;" />
    <span>天一次，血压超过</span>
    <a-input v-model:value="bloodPressure" style="width:100px;border-style: hidden;border-bottom: 1px solid #050505;" />
    <span>mmgh或有头昏等症状复诊</span>
  </td>
</template>
<script setup>
import { ref, watch } from 'vue';

const adviceOne = ref(false);
const adviceTwo = ref(false);
const day1 = ref('');
const bloodPressure = ref('');

watch(adviceTwo, (value) => {
  if (value) {
    const spans = document.querySelectorAll('td.col2 span');
    const values = Array.from(spans).map(span => span.textContent);
    values.push(day1.value, bloodPressure.value);
    console.log(values);
  }
});
</script>