在 Vue js V3 中使用插槽实现可重用逻辑

Question

我对 Vue js 有点陌生，但遇到了一个问题。我正在尝试创建一个组件，它将是一个渲染较少的组件，并且只处理逻辑，而渲染将由不同的组件完成。

根据我在 Vue js 中的发现，预期的方法是使用插槽，所以我想出了这段代码：

NodeRedControllable.vue

<script>
  import debounce from 'lodash/debounce'

  export default {
    name: 'NodeRedControllable',
    props: {
      "node_red_prop": String
    },

    data () {
      return {
        watcher_enable: true,
        value: 0
      }
    },

    mounted() {
      let self = this
      this.$uibuilder.onTopic(self.node_red_prop, function(msg){
        console.log(msg)
        self.watcher_enable = false
        self.value = msg.payload.value
      })
    },

    methods : {
      setValue(value) {
        this.value = value
      }
    },

    watch: {  

      value: debounce(function (newValue, oldValue) {
        if(this.watcher_enable) {
          this.$uibuilder.send({
            payload:{
              "node_red_prop": this.node_red_prop,
              "value": this.value
            }
          })
          console.log(`The ${this.node_red_prop} has changed value from ${oldValue} to ${newValue}`)
        }
        this.watcher_enable = true
      }, 500)

    },

  }
</script>

<template>
  <slot :value="value" :setValue="setValue"/>
</template>

PumpControl.vue

<script>
import NodeRedControllable from "./NodeRedControllable.vue";

  export default {

    components: {
      NodeRedControllable
    },

    props: {
      "pump_label": String,
      "node_red_prop": String
    }

  }
</script>

<template>
  <NodeRedControllable :node_red_prop="node_red_prop" v-slot="{value, setValue}">
      <v-slider :value="value" @update:modelValue="setValue" :label="pump_label"></v-slider>
  </NodeRedControllable>
</template>

代码运行良好，只是当 NodeRedControllable 组件在此函数中收到消息时我的滑块没有更新：

this.$uibuilder.onTopic(self.node_red_prop, function(msg){
  console.log(msg)
  self.watcher_enable = false
  self.value = msg.payload.value
})

我希望在从我的节点红色服务器收到消息时更新滑块。问题不是来自处理消息接收的逻辑，因为该值已正确显示在控制台中。但它并没有从 NodeRedControllable 组件传输到 PumpControl 中的滑块。