【vue】Unknown custom element になるが原因がわからない

Question

Vueファイルの<script>をJavaScriptで書いていたのですが<script lang="ts">に書き換えた結果うまく表示されないようになってしまいました。

エラーログ

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

SKHomepage.vueもSKTestButton.vueも"name"を指定しているはずなのにDevTool上では<Anonymous Component>扱いされてしまうのが原因だと思うのですが、どこが悪いかわかりません。

SKHomepage.vue

<template>
<div>
  <h1>Homepage</h1>
  <SKTestButton></SKTestButton>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

import SKTestButton from './SKTestButton.vue'

export default Vue.extend({
  name: 'sk-homepage',
  components: {
    'SKTestButton': SKTestButton,
  },
})
</script>

SKTestButton.vue

<template>
  <button>Push me!</button>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  'name': 'SKTestButton'
})
</script>

続報1
Vue.componentを使えば名前ありで登録できました。これを使わず登録するにはどうすればいいでしょう?
編集2
問題が発生する最小のコードに変更しました。

Answer 1

webpack.config.jsの

use: "ts-loader"

を

loader: "ts-loader"

に変えたところうまく動くようになりました。
webpackわからない…

Answer 2

エラーログの通りだと思います。

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

簡単に言えば、そんなコンポネントないですってことですが、lang=tsによって、コンポネント名の記述ルールが変わっているのではないでしょうか？現在ケバブケースになってますが、スネークケースとかに変えてみたらなにか変化あるでしょうか。

Comments

[aoisensi]

具体的にどこを直したらうまく動くでしょうか？

[aoisensi]

`name`プロパティを削除してみましたが変わりありません

[FKM]

ちょっと書き換えました。lang=tsにしてから読み込まなくなったということは、記述ルール(ケバブケース→スネークケース）が変わっていることによって、そんなテンプレートがないと警告している可能性があります。
https://qiita.com/nrslib/items/be90cc19fa3122266fd7

[aoisensi]

スネークケースでもケバブケースでもうまくいきません 同じです