laravelでのvueコンポーネントの登録がうまくいかない

Question

前提・実現したいこと

https://blog.capilano-fw.com/?p=1418
こちらのサイトを参考にリアルタイムチャットを実装しようとしたがvueコンポーネントの登録がうまくいっていない。

発生している問題・エラーメッセージ

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

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

(found in <Root>)

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

(found in <Root>)

該当のソースコード

chat.blade.phpファイル
<example-component></example-component>は正しく表示がされている

@extends('chat.layout')
@section('content')

    <div id="app">
        <textarea v-model="message"></textarea>
        <br>
        <button type="button">送信</button>

        <chat-component></chat-component>
    </div>

    <div id="chat">
        <example-component></example-component>
    </div>
@endsection

app.jsファイル

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Vue.component('chat-component', require('./components/ChatComponent.vue').default);

const chat = new Vue({
    el: '#chat',
});

ChatComponent.vueファイル

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
    name: 'chat',
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

試したこと

コンポーネント名の記載ミスのチェック
https://belltree.life/vue-component-error/
こちらを参考にChatComponent.vueにname：chatを記載してみた
php artisan config:cacheのあとにnpm run devを実行

補足情報（FW/ツールのバージョンなど）

npm -v
6.14.5

vue --version
@vue/cli 4.4.1

Comments

[meshi_s]

「v-model="message"」のエラー解消で表示されるとかありませんか？

[bigbox267]

<textarea v-model="message"></textarea>
をコメントアウトしてみましたが

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

(found in <Root>)

がでています

Answer 1

試したところ

    <div id="app">
        <textarea v-model="message"></textarea>
        <br>
        <button type="button">送信</button>

        <chat-component></chat-component>
    </div>

    <div id="chat">
        <example-component></example-component>
    </div>

でchat-componentをappで使ってますが、

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Vue.component('chat-component', require('./components/ChatComponent.vue').default);

const chat = new Vue({
    el: '#chat',
});

でapp用Vueクラス作成後に登録してるのが原因ですね。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('chat-component', require('./components/ChatComponent.vue').default);

const app = new Vue({
    el: '#app',
});

const chat = new Vue({
    el: '#chat',
});

これでよいかと(npm run devをやるのと、スーパーリロードなりでブラウザキャッシュを回避)

Comments

[bigbox267]

解決できました。
ありがとうございます。