VueでUncaught TypeError: Cannot set property 'render' of undefinedのエラー

Question

発生している問題

以下のファイルのようにapp.vueにhello.vueをcomponentとして登録して表示させたいです。
しかし表示できず、デベロッパツールのコンソールでは下記のようなエラーが出てしまいます。

どこを修正すれば良いのでしょうか？

●app/javascript/app.vue

<template>
  <div id="app">
    <hello-tag></hello-tag>
    <p>app vue</p>
  </div>
</template>

<script>
import Hello from 'components/hello.vue'
Vue.component('hello-tag', Hello)
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

●app/javascript/components/hello.vue

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "単一ファイル"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

●app/javascript/packs/main.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

●app/views/home/index.html.erb

<p>index</p>
<%= javascript_pack_tag 'main' %>
<%= stylesheet_pack_tag 'main' %> 

Comments

[FKM]

この記述の元になったソースがあれば提示お願いします。

Vue.component('hello-tag', Hello)

なんか他と違うとは思うのですが