【Laravel+Vue.js】PusherからのデータをLaravel Echoで処理したい

Question

前提

リアルタイムチャットのようなものをLaravel+Vue.jsで作ろうとしています。
チャットの記録をするテーブル名はrecords、そのモデルはRecordです。

入力されたデータをPusherで受け取るところまではできました。

ブラウザで2つのタブを開き、片方のタブでコメントを送信しました。
そうするともう一つのタブの開発者ツールでNetworkを確認すると

{event: "App\Events\RecordCreated",…}
channel: "timeline"
data: "{"record":{"id":166,"user_id":"0","body":"test","memo":"memo","date":"11/1","time":"11:11","ip":"ip","created_at":"2020-08-05T03:37:41.000000Z","updated_at":"2020-08-05T03:37:41.000000Z"}}"
event: "App\Events\RecordCreated"

このようにしっかり受け取れていることがわかります。

問題

しかしLaravel Echoで下記のように書いてもconsole.logが実行されません。
エラーやlaravel.logも発生しません

mounted() {
    Echo.channel('timeline').listen('.RecordCreated', (e) => {
        console.log(e);
      });
  }

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

$record = Record::create($request->record);
        event(new RecordCreated($record));

<?php

namespace App\Events;

use App\Record;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class RecordCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $record;

    public function __construct(Record $record)
    {
        $this->record = $record;
    }

    public function broadcastOn()
    {
        return new Channel('timeline');
    }
}

バージョン:
Laravel Framework 7.22.4
@vue/cli 4.4.6