Vue version

3.3.4

Link to minimal reproduction

https://codesandbox.io/s/magical-meadow-4hhmk3?file=/src/Demo.vue

Steps to reproduce

<template>
  <div>
    <!-- ... -->
    <component
      :is="(workflowStore.selectedNode.type || '').toLowerCase()"
      :config="workflowStore.selectedNode.props"
    />
    <!-- ... -->
  </div>
</template>

<script setup lang="ts">
  import { useWorkflowStore } from '@/store/modules/workflow';
  import Root from '@/views/workflow/designer/common/process/config/RootNodeConfig.vue';

  const workflowStore = useWorkflowStore();
</script>

<style scoped lang="less"></style>

I can solve this problem temporarily by registering components globally

import Root from '@/views/workflow/designer/common/process/config/RootNodeConfig.vue';
// ....
  const app = createApp(App);
  app.component('Root', Root);
// ...

In composition style, how do you register components locally

The doc only has this example

What is expected?

The component is rendered normally

What is actually happening?

The component is not rendered

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-1240P
    Memory: 10.71 GB / 39.70 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.5.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.2283.0), Chromium (110.0.1587.57)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

null

Solve successfully

Solve successfully

<script setup lang="ts">
  import Root from '@/views/workflow/designer/common/process/config/RootNodeConfig.vue';

  defineOptions({
    components: {
      Root,
    },
  });
<script />

or

<script lang="ts">
  import Root from '@/views/workflow/designer/common/process/config/RootNodeConfig.vue';

  export default {
    components: {
      Root,
    },
  };
</script>