vue使用provide,inject产生的问题

Question

实现：一个点击弹出框的数据，赋值给input的value
出现的问题：弹出框的数据，input的value没有发生变化
我是使用在list-view的组件使用provide注入当前组件的实例对象，在其孙子组件right获得list-view的组件的实例对象，然后渲染list-view的插槽
demo
如果是一层一层传插槽的，是没有出现问题的

//index.vue
<template>
  <list-view>
    <select-tree
      :tree="tree"
      :value="value"
      @node-click="handleNodeClick"></select-tree>
  </list-view>
</template>

<script>
import ListView from '@/components/slot/list-view'
import SelectTree from '@/components/slot/select-tree'
export default {
  components: {
    ListView,
    SelectTree
  },
  data() {
    return {
      tree: [
        {
          id:'001',
          name:'123'
        },
        {
          id:'002',
          name:'321313'
        }
      ],
      value:''
    }
  },
  methods: {
    handleNodeClick(data) {
      this.value = data.name
    }
  }
}
</script>

//list-view

<template>
  <right></right>
</template>
<script>
import Right from '@/components/slot/right'

export default {
  provide(){
    return {
      top: this,
    };
  },
  components: {
    Right
  }  
}
</script>

//select-tree
<template>
  <div>
    <el-popover>
      <el-input slot="reference" :value="value"></el-input>
      <div>
        <el-input></el-input>
        <el-tree
          :data="tree"
          node-key="id"
          :props="orgProps"
          @node-click="handleNodeClick"></el-tree>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orgProps: {
        label: 'name'
      }
    }
  },
  props: {
    tree: Array,
    value: String
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('node-click',data)
    }
  }
}
</script>

//right.vue
<script>
export default {
  inject: ['top'],
  render() {
    return (
      <div>
        {this.top.$slots.default}
      </div>
    )
  }
}
</script>