Warning: Vue received a Component which was made a reactive object (VueJS 3)

[ProNotion]

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.

This seems to be occurring when passing the :item-component prop.

Any ideas how to resolve this?

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 

[jledentu]

@ProNotion I didn't reproduced this warning. How did you initialized the object you pass as :item-component? Do you have some code to show?

[ProNotion]

@jledentu Here is the initialisation of the object passed to :item-component object

treeItem: {
    props: ["item"],
    computed: {
      cssClasses() {
        return {
          'bi-folder-fill': !this.item.isLeaf,
          'text-primary': !this.item.hasExpandedItem,
          'text-white': this.item.hasExpandedItem,
          'bi-file-earmark-arrow-down': this.item.isLeaf
        };
      },
      isFile() {
        return this.item.isLeaf;
      }
    },
    template: `
      <div>
        <a v-if="item.isLeaf" href="#" class="text-decoration-none">
          <i class="bi" :class="cssClasses"></i>
          {{ item.label }}
        </a>
        <div v-else>
          <i class="bi" :class="cssClasses"></i> {{ item.label }}
        </div>
      </div>
    `
}

[jledentu]

@ProNotion Where do you define this treeItem? In the data option (if you use the Options API)?

[jledentu]

@ProNotion Any news about this? Do you still have the problem?