如何在Vue中设置来自外部回调的数据？

<template>
  <div>
    <p>外部数据: {{ externalData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用ref创建一个响应式的数据
    const externalData = ref(null);

    // 假设这是一个外部回调函数
    function onExternalCallback(data) {
      // 更新响应式数据
      externalData.value = data;
    }

    // 模拟外部调用回调函数
    setTimeout(() => {
      onExternalCallback('这是来自外部的数据');
    }, 2000);

    // 返回响应式数据，使其在模板中可用
    return {
      externalData
    };
  }
};
</script>

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      externalData: null
    });

    function onExternalCallback(data) {
      state.externalData = data;
    }

    // ...其他逻辑

    return {
      externalData: state.externalData
    };
  }
};

import { nextTick } from 'vue';

function onExternalCallback(data) {
  externalData.value = data;
  nextTick(() => {
    // DOM更新完成后的操作
  });
}