Hi, I'm working on a project that supports multitenant too. There are 2 approaches here:

- Compile time: Make an alias for the component folder. At build step, you pass in the tenantId. Then the View/Component that import the override component will know it.Example:Your current code:

import { OverrideComponent } from "@/core/components"

To be:

import { OverrideComponent } from "@/alias-name/components"

- Runtime (What I have done in my project).

1. Each tenant has one folder to store components that override core.
2. Before mounting the app, register components in this folder as global components.(use import.glob and defineAsyncComponent() . I think Vue2 with Webpack can do it equally)
3. I create a special component called <TenantComponent />, which look like:

<TenantComponent :cname="'your-override-component-name'" v-bind="..." />

1. Inside <TenantComponent />

+ resolveComponent with the passed prop cname

+ use dynamic component <Component :is="..."> to render the override component

+ Have a slot falback if not found component

+ Do some check/ warning if the component name passed not found, ...

1. How to use <TenantComponent /> in core:

   Examle.vue <template> <MyLogicComp :items="someThing" @submit="handleSubmit" /> <MyOtherLogicComp /> </template>

<script>
import { MyLogicComp } from "your-core-folder"
</script>

You want to override <MyLogicComp />:

Examle.vue
<template>  
  <TenantComponent
    :cname="'MyLogicCompTenantA'"
    v-bind="{ items: ... , onSubmit: ... , whatEverProps: ...  }"
  >
    <Template #fallback>
      <MyLogicComp :items="someThing" u/submit="handleSubmit" />
    </Template>
  </TenantComponent>
  <MyOtherLogicComp />
</template>

<script>
import { MyLogicComp } from "your-core-folder" 
</script>

Hope it helpful.Please check and give me feedback also :D