使用watch实现实时数据更新

//
<div m-y-3>选择标签或填写：
<n-checkbox-group v-model:value="tagOption">
  <n-space item-style="display: flex;">
    <n-checkbox value=" blockchain " label="区块链" />
    <n-checkbox value=" cryptocurrency " label="加密货币" /> 
    <n-checkbox value=" bitcoin " label="比特币" />
  </n-space>
</n-checkbox-group>
</div>
<div m-b-3>
<n-input
    v-model:value="tagsX"
    type="text"
    placeholder="输入英文标签，以逗号或空格分隔"
/>
</div>
<script setup>
const tagOption = ref(' ')
const tagsX = ref('cn  cn-reader ')

watch(tagOption, () => {
  tagsX.value += tagOption.value[[tagOption.value.length - 1]] //每次增加一条
}, {flush: 'pre', immediate: true, deep: true})
</script>