Vue loses slot reactivity when use with render function - vue.js

Question

I have this markup
<ComponentA>
<Child #click="selected=1">{{selected}}</Child>
<Child #click="selected=2">{{selected}}</Child>
<Child #click="selected=3">{{selected}}</Child>
<Child #click="selected=4">{{selected}}</Child>
</ComponentA>
data() {
return: {selected: -1}
}
Thats Ok, it's reactive and it shows selected in -1 and if any Child is clicked, selected is changed and showed in Dom. But I need a way to mount just a slice of Child based on certains conditions. So my approach was as I show next:
<!-- ComponentA -->
<template>
<div id="container">
<slot></slot>
</div>
</template>
function selectChildren(VNodes) {...} // return VNode[]
function mountSelectionChildren(VNodes) {
const childrenCmp = {
data: function () {
return {
items: [],
}
},
mounted() {
this.items = selectChildren(VNodes) // get a slice of total Child, based on certains conditions I ommited
}
render(h) {
return h("div", [this.items.map(item => h("div", {...},[item]))])
}
}
new Vue(childrenCmp).$mount("#container")
}
export default {
mounted() {
mountSelectionChildren(this.$slots.default)
}
}
It works, rendering the DOM and UI that I want, but now, click Child elems is not reactive and don't show selected attribute. So, how can I make slot mounted with render fn, becomes reactive?

Answer 1

try something like:
function selectChildren(VNodes) {...} // return VNode[]
export default {
render(h){
let VNodes = this.$slots.default || []
let items = selectChildren(VNodes)
return h("div", [items.map(item => h("div", {...},[item]))])
}
}