Vue+tsx のスロット使用の問題が置き換えられない

'vue-class-component' からコンポーネントをインポートします。
'@packs/common/VanUIComponent' から VanUIComponent をインポートします。
'vue' から { VNode } をインポートします。
'vue-property-decorator' から { Prop } をインポートします。
'@packs/config/card' から { CardShadowEnum } をインポートします。

@成分
デフォルトクラスCardをエクスポートし、VanUIComponentを拡張します。
  @Prop({
    タイプ: 文字列、
    デフォルト: 未定義
  }) パブリック ヘッダーパディング !: 文字列 | 未定義

  @Prop({
    タイプ: 文字列、
    デフォルト： ''
  }) パブリックタイトル !: 文字列

  @Prop({
    タイプ: 文字列、
    デフォルト: CardShadowEnum.Hover
  }) パブリックシャドウ !: CardShadowEnum

  パブリック静的コンポーネント名 = 'v-card'

  パブリックラッパークラス名()を取得します: 文字列 {
    定数リスト: 文字列[] = ['v-card__wrapper']

    リストをプッシュします(`shadow-${ this.shadow }`)

    リストを返します。join(' ')
  }

  パブリックレンダリング(): VNode {
    戻る （
      <div クラス = { this.wrapperClassName }>
        <div class="v-card__header" style={ { padding: this.headerPadding } }>
          {
            this.$slots.title ? <slot name="title" /> : <div>{ this.title }</div>
          }
        </div>
        <div class="v-card__body">
          <スロット名="デフォルト" />
        </div>
        <div class="v-card__footer"></div>
      </div>
    ）
  }
}

<テンプレート>
  <vカード>
    <テンプレート #title>1111</テンプレート>
  </v-card>
</テンプレート>

<script lang="ts">
'vue' から Vue をインポートします
'vue-class-component' からコンポーネントをインポートします。

@成分
デフォルトのクラスをエクスポートし、ComponentsをVueに拡張します。

}
</スクリプト>

<style lang="scss" スコープ>
.components__wrapper {
  パディング: 20px;
}
</スタイル>

...
  パブリックレンダリング(): VNode {
    戻る （
      <div クラス = { this.wrapperClassName }>
        <div class="v-card__header" style={ { padding: this.headerPadding } }>
          {
            this.$slots.title ?? <div>{ this.title }</div>
          }
        </div>
        <div class="v-card__body">
          <スロット名="デフォルト" />
        </div>
        <div class="v-card__footer"></div>
      </div>
    ）
  }
...