Rails ActionCable didn't receiving data

Question

I have two servers

1. APIs server(Rails & ActionCable)
2. Customer server(Rails 5.1 & Vue js & actioncable from Yarn)

on APIs server:

in app/channels/operation_channel.rb

class OperationChannel < ApplicationCable::Channel
    def subscribed
        stream_from 'operations'
    end

    def unsubscribed
        # Any cleanup needed when channel is unsubscribed
    end
end

in config/environments/production.rb

config.action_cable.disable_request_forgery_protection = true

in config/routes.rb

mount ActionCable.server => '/cable'

in app/models/operation.rb

class Operation < ApplicationRecord
    [...]

    after_update :broadcast

    def broadcast
        ActionCable.server.broadcast "operations", operation: self
    end

    [...]
end

on Customer server:

in main.js

import ActionCable from 'actioncable'

var cable = ActionCable.createConsumer('wss://[APIs server URL]/cable');

var operations = cable.subscriptions.create('OperationChannel', {
    connected: function() {
        console.log("connected");
    },
    disconnected: function() {
        console.log("disconnected");
    },
    received: function(data) {
        console.log('received');
        console.log(data);
    }
});

I can only get disconnected callback called when the web-socket server stopping, and I can see web-socket info in the log:

Started GET "/cable/" [WebSocket] ...
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: upgrade, HTTP_UPGRADE: websocket)
.
.
.
[ActionCable] Broadcasting to operations: {:operation=>#<Operation id: 1,...

I have done a lot of research, but still can receive any data from broadcasting and the connected callback never be called too, please help. Thanks