Vue：尝试呈现Facebook Messenger复选框时，不断出现iframe祖先问题

Question

从PHP网站切换到Vue.js网站，我无法呈现Facebook Messenger复选框。我在控制台中不断收到错误Refused to display. Violated iFrame ancestor。

我的代码如下：

Modal.vue

<template>
  <div class="fb-messenger-checkbox"
    :origin=shopurl
    :page_id=fbPageId
    :messenger_app_id=fbAppId
    :user_ref=userRef
    prechecked="true"
    allow_login="true"
    size="medium">
  </div>
</template>

<script>

   export default {

      watch: {
         modalType(newVal) {
         if (newVal == "fbCheckbox") {
        let fbAppId      = this.fbAppId
        let fbApiVersion = this.fbApiVersion

        setTimeout(() => {
            window.fbAsyncInit = function() {
                FB.init({
                  appId      : fbAppId,
                  xfbml      : true,
                  version    : fbApiVersion
                });
                FB.Event.subscribe('messenger_checkbox', 
                             function(e) {
                  console.log("messenger_checkbox event");
                  console.log(e);
                  if (e.event == 'rendered') {
                    console.log("Plugin was rendered");
                  } else if (e.event == 'checkbox') {
                    var checkboxState = e.state;
                    console.log("Checkbox state: " + 
                            checkboxState);
                  } else if (e.event == 'not_you') {
                    console.log("User clicked 'not you'");
                  } else if (e.event == 'hidden') {
                    console.log("Plugin was hidden");
                  }
                });
              }; 
              window.fbAsyncInit()
        }, 500)
        }
          },

      }
   }

</script>

我不确定当前问题是什么，因为这是与在PHP页面上呈现复选框的代码相同，并且所有prop值都是正确的。