How to make the loop (v-for) dynamic inside h (Vue.JS) function?

Question

I have a reactive variable list either ref or reactive

in a vue.Js project

and i create an app that depends on this list(reactive)

let list = ref(['item']);

let vNode = h(
  'ul',
  list.value.map((v, i) => { return h('li', { key: i }, v) })
);

let customApp = createApp(vNode);

customApp.mount('#trial')

when list changes the mounted component doesn't change, how can i make it dynamic and sync with list?

Answer 1

the problem was solved using a component not a vnode.

let list = ref(['item']);

const comp = defineComponent({
  setup() {
    const arr = computed(() => toastsList.value);

    // or use list.value directly
    return () => h('ul',arr.value.map((v, i) => { return h('li', { key: i }, v) }));
  },
});

createApp(comp).mount('#trial');