Vue3 中获取选中 checkbox 后 span 和 a-input 的值 - 使用 <script setup>

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

const advice = ref({
  one: false,
  two: false,
  three: false
});

const day1 = ref('');
const bloodPressure = ref('');

watch(advice.two, (value) => {
  if (value) {
    const adviceTwoSpan = document.querySelectorAll('td.col2 span')[1];
    const spans = adviceTwoSpan.querySelectorAll('span');
    
    for (let i = 0; i < spans.length; i++) {
      console.log(spans[i].textContent);
    }
    
    console.log(day1.value);
    console.log(bloodPressure.value);
  }
});
</script>