我有Vue.js应用程序和组件代码的关键部分看起来如下：
specific-modal.vue:

<template>
  <v-modal-dialog
    :visible="isModalVisible"
    title="CONNECTION"
    okText="Save"
    cancelText="Cancel"
    :isSaveDisabled="isDisabled"
    :width="550"
    :height="620"
    @ok="onOk"
    @cancel="onCancel"
    @hiding="onHiding"
  >
    ...

base-modal.vue:

<template>
  <DxPopup
    v-bind="$attrs"
    :hide-on-outside-click="true"
    :drag-enabled="true"
    :wrapper-attr="popupAttributes"
    position="center"
    v-on="$listeners"
    @hiding="onHiding"
  >
    <slot />
    <slot name="footer">
      <DxToolbarItem template="save-template" toolbar="bottom" location="after" />
      <template #save-template>
        <DxButton text="Ok" @click="onOk" />
      </template>

      <DxToolbarItem template="cancel-template" toolbar="bottom" location="after" />
      <template #cancel-template>
        <DxButton text="Cancel" @click="onCancel" />
      </template>
    </slot>
  </DxPopup>
</template>

<script>
import { DxPopup, DxToolbarItem } from "devextreme-vue/popup";
import DxButton from 'devextreme-vue/button';
...

#save-template带有红线下划线，并显示一条消息：
'v-slot' directive must be owned by a custom element, but 'slot' is not.eslint-plugin-vue
如何克服这个问题？
EDIT:
如果我做如下：

<slot />
<slot name="footer">
  <DxToolbarItem template="save-template" toolbar="bottom" location="after" />
  <custom-element>
    <template #save-template>
      <DxButton text="TEST" @click="onOk" />
    </template>
  </custom-element>

  <DxToolbarItem template="cancel-template" toolbar="bottom" location="after" />
  <custom-element>
    <template #cancel-template>
      <DxButton text="Cancel" @click="onCancel" />
    </template>
  </custom-element>
</slot>

当我运行应用程序时，我收到以下错误：

[Vue warn]: Unknown custom element: <custom-element> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我不知道该怎么做。