Vue warn: Failed to mount component問題のトラブルシューティング

<template>
  <MyComponent />
</template>

<script>
export default {
  // MyComponentのインポートまたは登録を忘れている
};
</script>

// ローカル登録
<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
</script>

// グローバル登録
<script>
import MyComponent from './MyComponent.vue';
import Vue from 'vue';

Vue.component('MyComponent', MyComponent);
</script>

<!-- 正しいテンプレート構文 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<template>
  <ChildComponent :data="someData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      someData: 'Hello, World!'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

npm install vue@3

<script>
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app'); // 正しいマウントポイント
</script>

<!-- ケバブケース -->
<my-component></my-component>

<!-- キャメルケース -->
<MyComponent />