将Vue集成至现有Symmetry Shopify主题的报错解决求助

我正在使用Symmetry Shopify主题，想要引入Vue进行状态管理。按照文档操作后出现报错（见截图：），导致页面其他组件无法加载。经排查，问题出在主题部分section包含的内联样式代码：

{% style %}
      {%- if section.settings.autoplay -%}
        #section-id-{{ section.id }} slide-show {
          --duration: {{ section.settings.autoplay_speed }}s;
          --play-state: paused;
        }
      {%- endif -%}

      {%- if section.settings.height == 'fixed' %}
        #section-id-{{ section.id }} .height--fixed {
          --image-height: {{ section.settings.height_mobile }}px;
        }

        @media (min-width: 768px) {
          #section-id-{{ section.id }} .height--fixed {
            --image-height: {{ section.settings.height_desktop }}px;
          }
        }
      {%- endif -%}

      {%- if section.settings.height == 'adapt' %}
        #section-id-{{ section.id }} .height--adapt {
          {%- if section.blocks.first.settings.mobile_image -%}
            --aspect-ratio: {{ section.blocks.first.settings.mobile_image.aspect_ratio }};
          {%- else -%}
            --aspect-ratio: {{ section.blocks.first.settings.image.aspect_ratio | default: 2.0 }};
          {%- endif -%}
        }
        {%- if section.blocks.first.settings.mobile_image -%}
        @media (min-width: 768px) {
          #section-id-{{ section.id }} .height--adapt {
            --aspect-ratio: {{ section.blocks.first.settings.image.aspect_ratio | default: 2.0 }};
          }
        }
        {%- endif -%}
      {%- endif -%}

      {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .text-overlay__title {
          font-size: {{ block.settings.title_size_mobile }}px;
          {%- if block.settings.title_size_mobile >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
      {%- endfor -%}

      @media (min-width: 768px) {
        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .text-overlay__title {
          {%- assign title_size_medium = block.settings.title_size | times: 0.7 | at_least: block.settings.title_size_mobile -%}
          font-size: {{ title_size_medium }}px;
          {%- if title_size_medium >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }

      @media (min-width: 1100px) {
        {%- for block in section.blocks -%}
        #section-id-{{ section.id }} .slide-{{ forloop.index }} .text-overlay__title {
          font-size: {{ block.settings.title_size }}px;
          {%- if block.settings.title_size >= 90 -%}
          line-height: 1em;
          {%- endif %}
        }
        {%- endfor -%}
      }
    {% endstyle %}

我发现两种布局的差异：

• 将{{ content_for_layout }}放在Vue根容器外时无报错：

<div id="app"> 
   </div>

 <main id="content" role="main">
        <div class="container cf">
          {{ content_for_layout }}
        </div>
      </main>

• 将其放入Vue根容器内时会报错：

<div id="app"> 
      <main id="content" role="main">
        <div class="container cf">
          {{ content_for_layout }}
        </div>
      </main>
   </div>

我的需求是：让content_for_layout中的section能访问Vue实例，且不想修改主题原有代码，请问如何解决或绕过该问题？

内容的提问来源于stack exchange，提问作者Filbert Okafor