[Ethereum] DOMException: Failed to execute ‘postMessage’ on ‘Window’ error when using Metamask and truffle Ganache

I faced Uncaught (in promise) DOMException error like below when I was developing Nuxt web app with Metamask(chrome) and truffle Ganache.

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': function (error, response) {
              _this2.removeAllListeners(payload.id);
              if (!error) {
 ...<omitted>... } could not be cloned.

What I tried to do is send transactions to local blockchain(Ganache).

    async sendTransaction(obj) {
      const web3 = await getWeb3();
      // get account
      const accounts = await web3.eth.getAccounts();
      const roomFactory = await getRoomFactory();

      // *ERROR OCCURS HERE*
      const result = await roomFactory.methods
        .createNewRoom(obj._roomId)
        .send({ from: accounts[0] });
      console.log("result", result);
    },

function getWeb3() and getRoomFactory() are following:

// getWeb()

const getWeb3 = () =>
  new Promise(async (resolve, reject) => {
    // Modern dapp browsers...
    if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      try {
        // Request account access if needed
        await window.ethereum.enable();
        // Acccounts now exposed
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      try {
        // Use Mist/MetaMask's provider.
        const web3 = new Web3(window.web3.currentProvider);
        console.log("Injected web3 detected.");
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
    // Fallback to localhost; use dev console port by default...
    else {
      try {
        const provider = new Web3.providers.HttpProvider(
          "http://127.0.0.1:8545"
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      } catch (error) {
        reject(error);
      }
    }
  });

import getWeb3 from "~/plugins/web3.js";
import RoomFactory from "./build/contracts/RoomFactory.json"; // which is build by truffle

const getRoomFactory = async () => {
  const web3 = await getWeb3();

  const abi = RoomFactory.abi;
  const networks = RoomFactory.networks["5781"];
  return web3.eth.Contract(abi, networks.address);
};

What I can do:

• get accounts (web3.eth.getAccounts()) from metamask provider
• get balance (web3.eth.getBalance(accounts[0]))

What I cannot do:

• send transaction to other contracts　(Mycontract.methods.myfunction().send())
• call (Mycontract.methods.myfunction().call())

Versions:

• Web3: 1.0.0-beta.36
• Metamask: 5.3.2
• truffle: 5.0.1

Similar problem is on the issue of metamask-extension.

I'd appreciate it if you could help me with some tips. Thank you.